<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Speakr - Audio Transcription & Summarization</title>
    {% include 'includes/loading_overlay.html' %}
    <!-- All dependencies bundled locally for offline support -->
    <script src="{{ url_for('static', filename='vendor/js/tailwind.min.js') }}"></script>
    <script src="{{ url_for('static', filename='vendor/js/vue.global.js') }}"></script>
    <script src="{{ url_for('static', filename='vendor/js/marked.min.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/css/easymde.min.css') }}">
    <script src="{{ url_for('static', filename='vendor/js/easymde.min.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/css/fontawesome.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    <link rel="icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='img/icon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='img/icon-16x16.png') }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='img/icon-180x180.png') }}">
    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
    <meta name="theme-color" content="#2563eb">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    maxHeight: {
                        '85vh': '85vh',
                        '90vh': '90vh'
                    },
                    colors: {
                        primary: 'var(--bg-primary)',
                        secondary: 'var(--bg-secondary)',
                        accent: 'var(--bg-accent)'
                    }
                }
            }
        }
    </script>
</head>
<body class="h-full bg-[var(--bg-primary)] text-[var(--text-primary)] transition-colors duration-300">
    <div id="loader" class="fixed inset-0 bg-gray-800 flex items-center justify-center z-50">
        <div class="text-white text-lg">Loading...</div>
    </div>
    <div id="app" v-cloak
         data-use-asr-endpoint="{{ use_asr_endpoint }}" 
         data-current-user-name="{{ current_user.name if current_user.is_authenticated else '' }}"
         data-user-language="{{ user_language }}"
         class="h-full flex flex-col opacity-0 transition-opacity duration-500">
        
        <!-- Header -->
        <header class="bg-[var(--bg-secondary)] border-b border-[var(--border-primary)] px-3 sm:px-4 py-3 flex items-center justify-between flex-shrink-0 z-50">
            <!-- Left side: Menu toggle and logo -->
            <div class="flex items-center gap-2 sm:gap-4 min-w-0 flex-shrink">
                <!-- Menu Toggle Button -->
                <button @click="toggleSidebar" 
                        class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors duration-200 flex-shrink-0 flex items-center justify-center">
                    <i class="fas fa-bars text-lg"></i>
                </button>
                
                <!-- Logo and Title -->
                <div class="flex items-center gap-2 sm:gap-3 min-w-0">
                    <img src="{{ url_for('static', filename='img/icon-32x32.png') }}" alt="Speakr" class="w-7 h-7 sm:w-8 sm:h-8 flex-shrink-0">
                    <h1 class="text-lg sm:text-xl font-bold text-[var(--text-primary)] truncate">Speakr</h1>
                </div>
            </div>

            <!-- Right side: User menu and controls -->
            <div class="flex items-center gap-3">
                <!-- Inquire Mode Button -->
                {% if inquire_mode_enabled %}
                <a href="/inquire" 
                   class="px-2 py-1.5 bg-[var(--bg-accent)] text-[var(--text-accent)] rounded-lg hover:opacity-80 transition-opacity text-sm sm:px-4 sm:py-2 sm:min-w-[120px] sm:flex sm:items-center sm:gap-2 sm:justify-center">
                    <i class="fas fa-search"></i>
                    <span class="hidden sm:inline" v-text="t('inquire.title')"></span>
                </a>
                {% endif %}

                <!-- New Recording Button -->
                <button @click="switchToUploadView" 
                        class="px-3 py-1.5 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors text-sm sm:px-4 sm:py-2 sm:min-w-[120px] sm:flex sm:items-center sm:gap-2 sm:justify-center">
                    <i class="fas fa-plus mr-1"></i><span v-text="t('nav.newRecording')"></span>
                </button>

                <!-- User menu -->
                {% if current_user.is_authenticated %}
                <div class="relative">
                    <button @click="isUserMenuOpen = !isUserMenuOpen" 
                            class="flex items-center gap-1 sm:gap-2 p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors duration-200"
                            :title="t('admin.userMenu')">
                        <i class="fas fa-user-circle text-lg"></i>
                        <span class="hidden lg:inline text-sm">{{ current_user.name if current_user.is_authenticated else 'User' }}</span>
                        <i class="fas fa-chevron-down text-xs hidden sm:inline"></i>
                    </button>
                    
                    <!-- User dropdown -->
                    <div v-if="isUserMenuOpen"
                         class="absolute right-0 mt-2 w-56 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg shadow-lg z-50">
                        <a href="/account" class="block px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors">
                            <i class="fas fa-cog mr-2 w-4 text-center"></i><span v-text="t('nav.settings')"></span>
                        </a>
                        <a href="/account#tags" class="block px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors">
                            <i class="fas fa-tags mr-2 w-4 text-center"></i><span v-text="t('help.tagManagement')"></span>
                        </a>
                        <button @click="openSharesList" class="w-full text-left px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors flex items-center">
                            <i class="fas fa-share-alt mr-2 w-4 text-center"></i><span v-text="t('modal.sharedTranscripts')"></span>
                        </button>
                        {% if current_user.is_admin %}
                        <a href="/admin" class="block px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors">
                            <i class="fas fa-user-shield mr-2 w-4 text-center"></i><span v-text="t('admin.title')"></span>
                        </a>
                        {% endif %}
                        <div class="border-t border-[var(--border-primary)] my-1"></div>
                        <button @click="toggleDarkMode" class="w-full text-left px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors flex items-center">
                            <i :class="isDarkMode ? 'fas fa-sun' : 'fas fa-moon'" class="mr-2 w-4 text-center"></i>
                            <span v-text="isDarkMode ? t('nav.lightMode') : t('nav.darkMode')"></span>
                        </button>
                        <button @click="openColorSchemeModal" class="w-full text-left px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors flex items-center">
                            <i class="fas fa-palette mr-2 w-4 text-center"></i>
                            <span v-text="t('modal.colorScheme')"></span>
                        </button>
                        <div class="border-t border-[var(--border-primary)] my-1"></div>
                        <a href="/logout" class="block px-4 py-2 hover:bg-[var(--bg-tertiary)] transition-colors">
                            <i class="fas fa-sign-out-alt mr-2 w-4 text-center"></i><span v-text="t('nav.signOut')"></span>
                        </a>
                    </div>
                </div>
                {% endif %}
            </div>
        </header>

        <div class="flex-1 flex overflow-hidden relative">
            <!-- Mobile Sidebar Backdrop -->
            <div v-if="!isSidebarCollapsed && isMobileScreen" 
                 @click="toggleSidebar"
                 class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden">
            </div>
            
            <!-- Sidebar -->
            <aside :class="['sidebar', isSidebarCollapsed ? 'collapsed' : '']">
                <div class="sidebar-content-wrapper">
                    <!-- Sidebar Header -->
                    <div class="p-4 border-b border-[var(--border-primary)] flex-shrink-0">
                        <div class="flex items-center justify-between mb-4">
                            <h2 class="text-lg font-semibold" v-text="t('nav.recording')"></h2>
                            <div class="flex gap-2">
                                {% if inquire_mode_enabled %}
                                <a href="/inquire" 
                                   class="px-2 py-1.5 bg-[var(--bg-accent)] text-[var(--text-accent)] rounded-lg hover:opacity-80 transition-opacity text-sm">
                                    <i class="fas fa-search"></i>
                                </a>
                                {% endif %}
                                <button @click="switchToUploadView" 
                                        class="px-3 py-1.5 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors text-sm">
                                    <i class="fas fa-plus mr-1"></i><span v-text="t('common.new')"></span>
                                </button>
                            </div>
                        </div>
                        
                        <!-- Search and Sort Controls -->
                        <div class="space-y-3">
                            <!-- Filter Toggle Button -->
                            <div class="flex items-center space-x-2">
                                <button @click="showAdvancedFilters = !showAdvancedFilters" 
                                        class="flex-1 flex items-center justify-between px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg text-sm hover:bg-[var(--bg-tertiary)] transition-colors">
                                    <span class="flex items-center">
                                        <i class="fas fa-filter mr-2 text-[var(--text-muted)]"></i>
                                        <span v-if="!searchQuery && filterTags.length === 0 && !filterDatePreset && !filterDateRange.start && !filterDateRange.end && !filterTextQuery"
                                              v-text="t('sidebar.searchRecordings')">
                                        </span>
                                        <span v-else class="text-[var(--text-accent)]">
                                            Active filters (${ (filterTags.length > 0 ? 1 : 0) + (filterDatePreset || filterDateRange.start || filterDateRange.end ? 1 : 0) + (filterTextQuery ? 1 : 0) })
                                        </span>
                                    </span>
                                    <i :class="['fas fa-chevron-down transition-transform text-[var(--text-muted)]', showAdvancedFilters ? 'rotate-180' : '']"></i>
                                </button>
                                <button v-if="searchQuery || filterTags.length > 0 || filterDatePreset || filterDateRange.start || filterDateRange.end || filterTextQuery"
                                        @click="clearAllFilters"
                                        class="px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg text-sm hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)] transition-colors"
                                        :title="t('buttons.clearAllFilters')">
                                    <i class="fas fa-times text-[var(--text-muted)]"></i>
                                </button>
                            </div>
                            
                            <!-- Advanced Filters Panel -->
                            <div v-show="showAdvancedFilters" class="p-3 bg-[var(--bg-tertiary)] border border-[var(--border-secondary)] rounded-lg space-y-3">
                                <!-- Text Search -->
                                <div>
                                    <label class="block text-xs font-medium text-[var(--text-muted)] mb-1" v-text="t('sidebar.filters')"></label>
                                    <div class="relative">
                                        <input v-model="filterTextQuery" 
                                               type="text" 
                                               :placeholder="t('sidebar.searchRecordings')" 
                                               class="w-full px-3 py-1.5 pl-8 pr-8 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]">
                                        <i class="fas fa-search absolute left-2.5 top-1/2 transform -translate-y-1/2 text-[var(--text-muted)] text-xs"></i>
                                        <button v-if="filterTextQuery" 
                                                @click="filterTextQuery = ''"
                                                class="absolute right-2.5 top-1/2 transform -translate-y-1/2 text-[var(--text-muted)] hover:text-[var(--text-primary)] text-xs"
                                                :title="t('buttons.clearSearchText')">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- Tag Filter -->
                                <div>
                                    <label class="block text-xs font-medium text-[var(--text-muted)] mb-1" v-text="t('tags.filterByTag')"></label>
                                    <div class="flex flex-wrap gap-1.5">
                                        <button v-for="tag in availableTags" 
                                                :key="tag.id"
                                                @click="filterTags.includes(tag.id) ? filterTags = filterTags.filter(id => id !== tag.id) : filterTags.push(tag.id)"
                                                :class="[
                                                    'px-2 py-1 rounded-full text-xs font-medium transition-all',
                                                    filterTags.includes(tag.id) 
                                                        ? 'bg-[var(--bg-accent)] text-[var(--text-accent)] ring-1 ring-[var(--border-accent)]' 
                                                        : 'bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-input)]'
                                                ]">
                                            <span class="inline-block w-2 h-2 rounded-full mr-1" :style="{ backgroundColor: tag.color || '#6B7280' }"></span>
                                            ${ tag.name }
                                        </button>
                                    </div>
                                    <p v-if="availableTags.length === 0" class="text-xs text-[var(--text-muted)] italic" v-text="t('tags.noTags')"></p>
                                </div>
                                
                                <!-- Date Filter -->
                                <div>
                                    <label class="block text-xs font-medium text-[var(--text-muted)] mb-1" v-text="t('sidebar.dateRange')"></label>
                                    <div class="grid grid-cols-3 gap-1.5 mb-2">
                                        <button v-for="preset in datePresetOptions"
                                                :key="preset.value"
                                                @click="filterDatePreset = filterDatePreset === preset.value ? '' : preset.value; filterDateRange = { start: '', end: '' }"
                                                :class="[
                                                    'px-2 py-1 rounded-md text-xs transition-all',
                                                    filterDatePreset === preset.value 
                                                        ? 'bg-[var(--bg-accent)] text-[var(--text-accent)]' 
                                                        : 'bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-input)]'
                                                ]"
                                                :title="preset.label">
                                            ${ preset.label }
                                        </button>
                                    </div>
                                    <div class="grid grid-cols-2 gap-2">
                                        <div>
                                            <input v-model="filterDateRange.start" 
                                                   @change="filterDatePreset = ''"
                                                   type="date" 
                                                   class="w-full px-2 py-1 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-md text-xs focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]"
                                                   :placeholder="t('form.dateFrom')">
                                        </div>
                                        <div>
                                            <input v-model="filterDateRange.end" 
                                                   @change="filterDatePreset = ''"
                                                   type="date" 
                                                   class="w-full px-2 py-1 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-md text-xs focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]"
                                                   :placeholder="t('form.dateTo')">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Sort Toggle -->
                            <button @click="sortBy = sortBy === 'created_at' ? 'meeting_date' : 'created_at'"
                                    class="w-full flex items-center justify-between px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg text-sm hover:bg-[var(--bg-tertiary)] transition-colors">
                                <span class="flex items-center">
                                    <i :class="['fas mr-2 text-[var(--text-muted)]', sortBy === 'meeting_date' ? 'fa-calendar' : 'fa-upload']"></i>
                                    <span v-text="t('sidebar.sortBy')"></span>: <span v-text="sortBy === 'meeting_date' ? t('sidebar.sortByMeetingDate') : t('sidebar.sortByDate')"></span>
                                </span>
                                <i class="fas fa-exchange-alt text-[var(--text-muted)]"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Recordings List -->
                    <div class="flex-1 overflow-y-auto p-4" 
                         @scroll="(e) => {
                            const element = e.target;
                            const threshold = 100; // Load more when 100px from bottom
                            if (element.scrollHeight - element.scrollTop - element.clientHeight < threshold) {
                                loadMoreRecordings();
                            }
                         }">
                        <div v-if="isLoadingRecordings && recordings.length === 0" class="text-center py-8">
                            <i class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
                            <p class="mt-2 text-[var(--text-muted)]" v-text="t('help.loadingRecordings')"></p>
                        </div>
                        
                        <div v-else-if="recordings.length === 0 && !isLoadingRecordings" class="text-center py-8">
                            <i class="fas fa-microphone-slash text-3xl text-[var(--text-muted)] mb-3"></i>
                            <p class="text-[var(--text-muted)]" v-text="t('sidebar.noRecordings')"></p>
                            <p v-if="searchQuery.trim()" class="text-sm text-[var(--text-muted)] mt-1">
                                <span v-text="t('help.tryAdjustingSearch')"></span> <button @click="clearAllFilters()" class="text-[var(--text-accent)] hover:underline" v-text="t('help.clearFilters')"></button>
                            </p>
                        </div>
                        
                        <div v-if="recordings.length > 0" class="space-y-2">
                            <div v-for="group in groupedRecordings" :key="group.title" class="mb-6">
                                <h3 class="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wide mb-2">
                                    ${group.title}
                                </h3>
                                <div class="space-y-1">
                                    <div v-for="recording in group.items" 
                                         :key="recording.id"
                                         @click="selectRecording(recording)"
                                         :class="[
                                             'p-3 rounded-lg cursor-pointer transition-all duration-200 border',
                                             selectedRecording?.id === recording.id 
                                                 ? 'bg-[var(--bg-accent)] border-[var(--border-accent)]' 
                                                 : 'bg-[var(--bg-tertiary)] border-transparent hover:bg-[var(--bg-accent-hover)]'
                                         ]">
                                        <!-- Title and Status Row -->
                                        <div class="flex items-center justify-between mb-1">
                                            <h4 class="font-medium text-sm truncate flex-1 mr-2" :class="selectedRecording?.id === recording.id ? 'text-[var(--text-accent)]' : 'text-[var(--text-primary)]'">
                                                ${ recording.title || t('common.untitled') }
                                            </h4>
                                            <div class="flex items-center gap-1 flex-shrink-0">
                                                <!-- Show Failed status for failed recordings -->
                                                <span v-if="recording.status === 'FAILED'" 
                                                      class="status-badge status-failed">
                                                    <i class="fas fa-exclamation-circle mr-1"></i>
                                                    ${ t('common.failed') }
                                                </span>
                                                
                                                <!-- Show Processing status for non-completed recordings -->
                                                <span v-else-if="recording.status !== 'COMPLETED'" 
                                                      :class="getStatusClass(recording.status)" 
                                                      class="status-badge">
                                                    ${formatStatus(recording.status)}
                                                </span>
                                                
                                                <!-- For completed recordings, show highlight and inbox badges -->
                                                <template v-else>
                                                    <span v-if="recording.is_highlighted" 
                                                          @click.stop="toggleHighlight(recording)"
                                                          class="status-badge status-highlighted clickable-badge"
                                                          :title="t('sidebar.removeFromHighlighted')">
                                                        <i class="fas fa-star"></i>
                                                    </span>
                                                    <span v-if="recording.is_inbox" 
                                                          @click.stop="toggleInbox(recording)"
                                                          class="status-badge status-inbox clickable-badge"
                                                          :title="t('sidebar.markAsRead')">
                                                        <i class="fas fa-inbox"></i>
                                                    </span>
                                                </template>
                                            </div>
                                        </div>

                                        <!-- Date -->
                                        <p class="text-xs text-[var(--text-muted)] mt-1 flex items-center">
                                            <i class="fas fa-calendar-alt mr-1.5 text-[var(--text-muted)]" style="font-size: 10px;"></i>
                                            ${formatDisplayDate(sortBy === 'meeting_date' ? recording.meeting_date : recording.created_at)}
                                        </p>

                                        <!-- Participants -->
                                        <div v-if="recording.participants" class="text-xs text-[var(--text-muted)] mt-1 flex items-start">
                                            <i class="fas fa-users mr-1.5 text-[var(--text-muted)] flex-shrink-0" style="font-size: 10px; margin-top: 2px;"></i>
                                            <span class="truncate">
                                                ${recording.participants}
                                            </span>
                                        </div>

                                        <!-- Tags -->
                                        <div v-if="getRecordingTags(recording).length > 0" class="flex flex-wrap gap-1 mt-1">
                                            <button v-for="tag in getRecordingTags(recording).slice(0, 2)" :key="tag.id"
                                                    @click.stop="filterByTag(tag)"
                                                    class="inline-flex items-center px-1.5 py-0.5 rounded-md text-xs font-medium text-white hover:opacity-80 transition-opacity cursor-pointer"
                                                    :style="{ backgroundColor: tag.color }"
                                                    :title="'Filter by ' + tag.name">
                                                <span v-text="tag.name"></span>
                                            </button>
                                            <span v-if="getRecordingTags(recording).length > 2" 
                                                  class="inline-flex items-center px-1.5 py-0.5 rounded-md text-xs text-[var(--text-muted)]"
                                                  :title="getRecordingTags(recording).slice(2).map(t => t.name).join(', ')">
                                                +${getRecordingTags(recording).length - 2} more
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Load More Indicator -->
                            <div v-if="isLoadingMore" class="text-center py-4">
                                <i class="fas fa-spinner fa-spin text-lg text-[var(--text-muted)]"></i>
                                <p class="text-sm text-[var(--text-muted)] mt-1" v-text="t('help.loadingMore')"></p>
                            </div>
                            
                            <!-- End of Results Indicator -->
                            <div v-else-if="!hasNextPage && totalRecordings > 0" class="text-center py-4 text-xs text-[var(--text-muted)]">
                                <i class="fas fa-check-circle mr-1"></i>
                                <span v-text="t('help.allRecordingsLoaded')"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- Main Content -->
            <main class="main-content" 
                  :class="{ 'sidebar-open': !isSidebarCollapsed }">

                <div class="flex-1 flex flex-col overflow-hidden">
                <!-- Upload View -->
                <div v-if="currentView === 'upload'" class="flex-1 flex items-center justify-center p-4 md:p-8 overflow-y-auto">
                    <div class="max-w-lg w-full my-auto">
                        <div class="text-center mb-8">
                            <i class="fas fa-microphone text-5xl md:text-6xl text-[var(--text-accent)] mb-4"></i>
                            <h2 class="text-2xl md:text-3xl font-bold mb-2" v-text="t('upload.title')"></h2>
                            <p class="text-[var(--text-muted)]" v-text="t('upload.dropzone')"></p>
                        </div>
                        
                        <div class="bg-[var(--bg-secondary)] p-6 rounded-xl border border-[var(--border-primary)]">
                            <!-- File Upload Area -->
                            <div @drop="handleDrop" @dragover="handleDragOver" @dragleave="handleDragLeave" @click="$refs.fileInput.click()"
                                 :class="['border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all duration-300', dragover ? 'border-[var(--border-accent)] bg-[var(--bg-accent)]' : 'border-[var(--border-secondary)] hover:border-[var(--border-accent)]']">
                                <i class="fas fa-cloud-upload-alt text-3xl text-[var(--text-muted)] mb-3"></i>
                                <p class="text-[var(--text-secondary)] mb-2" v-text="t('upload.dropzone')"></p>
                                <p class="text-xs text-[var(--text-muted)]" v-text="t('upload.supportedFormats')"></p>
                            </div>
                            <input ref="fileInput" type="file" @change="handleFileSelect" accept="audio/*,video/mp4,video/quicktime,video/x-msvideo,video/webm,.mp4,.mov,.avi,.mkv,.webm" multiple class="hidden">

                            <!-- Divider -->
                            <div class="my-6 flex items-center">
                                <div class="flex-grow border-t border-[var(--border-secondary)]"></div>
                                <span class="flex-shrink mx-4 text-xs text-[var(--text-muted)] uppercase" v-text="t('common.or')"></span>
                                <div class="flex-grow border-t border-[var(--border-secondary)]"></div>
                            </div>

                            <!-- Audio Recording Options -->
                            <div class="space-y-3">
                                <h3 class="text-sm font-medium text-[var(--text-secondary)] text-center" v-text="t('recording.title')"></h3>
                                
                                <!-- Microphone Recording -->
                                <button @click="startRecording('microphone')"
                                        class="w-full px-4 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center justify-center gap-2">
                                    <i class="fas fa-microphone"></i>
                                    <span v-text="t('recording.microphone')"></span>
                                </button>
                                
                                <!-- System Audio Recording -->
                                <button @click="startRecording('system')"
                                        v-if="canRecordSystemAudio"
                                        class="w-full px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center gap-2">
                                    <i class="fas fa-desktop"></i>
                                    <span v-text="t('recording.systemAudio')"></span>
                                </button>
                                
                                <!-- Both Audio Sources -->
                                <button @click="startRecording('both')"
                                        v-if="canRecordSystemAudio"
                                        class="w-full px-4 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors flex items-center justify-center gap-2">
                                    <i class="fas fa-microphone"></i>
                                    <i class="fas fa-desktop ml-1"></i>
                                    <span v-text="t('recording.microphoneAndSystem')"></span>
                                </button>
                                
                                <!-- Help Text -->
                                <div class="text-xs text-[var(--text-muted)] space-y-1 mt-3">
                                    <div class="flex items-center justify-between">
                                        <span><strong v-text="t('recording.microphone') + ':'"></strong> <span v-text="t('help.microphoneDesc')"></span></span>
                                        <i class="fas fa-microphone text-red-500 flex-shrink-0"></i>
                                    </div>
                                    <div v-if="canRecordSystemAudio" class="flex items-center justify-between">
                                        <span><strong v-text="t('recording.systemAudio') + ':'"></strong> <span v-text="t('help.systemAudioDesc')"></span></span>
                                        <i class="fas fa-desktop text-blue-500 flex-shrink-0"></i>
                                    </div>
                                    <div v-if="canRecordSystemAudio" class="flex items-center justify-between">
                                        <span><strong v-text="t('recording.microphoneAndSystem') + ':'"></strong> <span v-text="t('help.bothAudioDesc')"></span></span>
                                        <div class="flex items-center gap-1 flex-shrink-0">
                                            <i class="fas fa-microphone text-purple-500"></i>
                                            <i class="fas fa-desktop text-purple-500"></i>
                                        </div>
                                    </div>
                                    <div v-if="!canRecordSystemAudio" class="text-amber-600 dark:text-amber-400">
                                        <i class="fas fa-exclamation-triangle mr-1"></i>
                                        ${ t('recording.systemAudioNotSupported') }
                                        <button @click="showSystemAudioHelp = true" class="ml-2 text-blue-500 hover:text-blue-600 underline text-sm">
                                            <span v-text="t('buttons.help')"></span>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Tag Selection -->
                            <div class="mt-4">
                                <label class="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                                    <i class="fas fa-tags mr-1 text-[var(--text-muted)]"></i>
                                    ${ t('tags.title') }
                                </label>
                                
                                <!-- Selected Tags Display - Compact -->
                                <div v-if="selectedTags.length > 0" class="mb-2">
                                    <div class="p-1.5 bg-[var(--bg-tertiary)] rounded-md border border-[var(--border-secondary)] max-h-16 overflow-y-auto">
                                        <div class="flex flex-wrap gap-1">
                                            <span v-for="(tag, index) in selectedTags" :key="tag.id" 
                                                  class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[11px] font-medium text-white"
                                                  :style="{ backgroundColor: tag.color }">
                                                <span class="opacity-75 mr-0.5 text-[9px]">${index + 1}.</span>
                                                <span>${tag.name}</span>
                                                <button @click="removeTagFromSelection(tag.id)" 
                                                        class="ml-1 hover:opacity-100 opacity-70">
                                                    <i class="fas fa-times" style="font-size: 9px;"></i>
                                                </button>
                                            </span>
                                        </div>
                                    </div>
                                    <p class="text-[10px] text-[var(--text-muted)] mt-0.5">
                                        <i class="fas fa-info-circle mr-0.5" style="font-size: 9px;"></i>
                                        Tags ordered by priority
                                    </p>
                                </div>
                                
                                <!-- Tag Selection Container - Compact -->
                                <div v-if="availableTags.filter(tag => !selectedTagIds.includes(tag.id)).length > 0" 
                                     class="border border-[var(--border-secondary)] rounded-md bg-[var(--bg-tertiary)] p-2">
                                    <!-- Search Filter (always visible if tags available) -->
                                    <div class="mb-1.5">
                                        <div class="relative">
                                            <input v-model="uploadTagSearchFilter" 
                                                   type="text" 
                                                   :placeholder="t('tagsModal.searchTags')"
                                                   class="w-full px-2 py-1 pl-6 text-xs bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-primary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]">
                                            <i class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-[var(--text-muted)]" style="font-size: 9px;"></i>
                                            <button v-if="uploadTagSearchFilter" 
                                                    @click="uploadTagSearchFilter = ''"
                                                    class="absolute right-2 top-1/2 transform -translate-y-1/2 text-[var(--text-muted)] hover:text-[var(--text-primary)]">
                                                <i class="fas fa-times" style="font-size: 9px;"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <!-- Available Tags Grid - Fixed Height -->
                                    <div v-if="filteredAvailableTagsForUpload.length > 0" 
                                         class="overflow-y-auto" 
                                         style="max-height: 100px;">
                                        <div class="grid grid-cols-2 gap-1">
                                            <button v-for="tag in filteredAvailableTagsForUpload" 
                                                    :key="tag.id"
                                                    @click="addTagToSelection(tag.id)"
                                                    class="group flex items-center justify-between px-1.5 py-1 rounded border border-[var(--border-secondary)] hover:border-[var(--border-focus)] bg-[var(--bg-primary)] hover:bg-[var(--bg-secondary)] transition-all">
                                                <div class="flex items-center gap-1 min-w-0">
                                                    <span class="w-2 h-2 rounded-full flex-shrink-0" 
                                                          :style="{ backgroundColor: tag.color || '#6B7280' }"></span>
                                                    <span class="text-[11px] text-[var(--text-primary)] truncate" v-text="tag.name"></span>
                                                </div>
                                                <i class="fas fa-plus text-[var(--text-muted)] group-hover:text-[var(--text-accent)] transition-colors" style="font-size: 9px;"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div v-else class="py-2 text-center">
                                        <p class="text-[11px] text-[var(--text-muted)]">
                                            <i class="fas fa-search mr-1" style="font-size: 9px;"></i>
                                            No matching tags
                                        </p>
                                    </div>
                                </div>
                                <!-- Empty States -->
                                <div v-else-if="availableTags.length === 0" 
                                     class="p-2 bg-[var(--bg-tertiary)] rounded-md border border-[var(--border-secondary)]">
                                    <p class="text-xs text-[var(--text-muted)] text-center">
                                        <i class="fas fa-info-circle mr-1" style="font-size: 10px;"></i>
                                        <span v-text="t('help.noTagsCreated')"></span> <a href="/account#tags" class="text-[var(--text-accent)] hover:underline" v-text="t('help.createTags')"></a>
                                    </p>
                                </div>
                                <div v-else class="p-2 bg-[var(--bg-tertiary)] rounded-md border border-[var(--border-secondary)]">
                                    <p class="text-xs text-[var(--text-muted)] text-center">
                                        <i class="fas fa-check-circle mr-1" style="font-size: 10px;"></i>
                                        All tags selected
                                    </p>
                                </div>
                                
                                <p v-if="selectedTags.some(tag => tag.custom_prompt)" class="text-xs text-[var(--text-muted)] mt-1">
                                    <i class="fas fa-info-circle mr-1 text-[var(--text-accent)]"></i>
                                    Selected tags include custom summary prompts
                                </p>
                                <p v-if="selectedTags.length > 0 && useAsrEndpoint && selectedTags.some(tag => tag.default_language || tag.default_min_speakers || tag.default_max_speakers)" 
                                   class="text-xs text-[var(--text-muted)] mt-1">
                                    <i class="fas fa-cog mr-1 text-[var(--text-accent)]"></i>
                                    First tag's ASR settings will be applied: ${selectedTags[0].name}
                                </p>
                            </div>

                            <!-- Advanced Options for ASR (collapsible) -->
                            <div v-if="useAsrEndpoint" class="mt-4">
                                <button @click="showAdvancedOptions = !showAdvancedOptions" 
                                        class="w-full flex items-center justify-between px-3 py-2 bg-[var(--bg-tertiary)] rounded-md hover:bg-[var(--bg-accent)] transition-colors text-xs font-medium">
                                    <span class="flex items-center gap-2 text-[var(--text-secondary)]">
                                        <i class="fas fa-cog text-[var(--text-muted)]"></i>
                                        <span v-text="t('help.advancedAsrOptions')"></span>
                                    </span>
                                    <i :class="['fas text-[var(--text-muted)]', showAdvancedOptions ? 'fa-chevron-up' : 'fa-chevron-down']"></i>
                                </button>
                                
                                <div v-show="showAdvancedOptions" class="mt-2 p-3 bg-[var(--bg-tertiary)] rounded-md space-y-3 border border-[var(--border-secondary)]">
                                    <!-- Language Selection -->
                                    <div>
                                        <label class="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                                            Transcription Language
                                        </label>
                                        <select v-model="uploadLanguage" 
                                                class="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-primary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]">
                                            <option v-for="lang in languageOptions" :key="lang.value" :value="lang.value" v-text="lang.label"></option>
                                        </select>
                                    </div>
                                    
                                    <!-- Speaker Settings -->
                                    <div class="grid grid-cols-2 gap-3">
                                        <div>
                                            <label class="block text-xs font-medium text-[var(--text-secondary)] mb-1" v-text="t('form.minSpeakers')">
                                            </label>
                                            <input v-model.number="uploadMinSpeakers" 
                                                   type="number" 
                                                   min="1" 
                                                   max="20"
                                                   class="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-primary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]">
                                        </div>
                                        <div>
                                            <label class="block text-xs font-medium text-[var(--text-secondary)] mb-1" v-text="t('form.maxSpeakers')">
                                            </label>
                                            <input v-model.number="uploadMaxSpeakers" 
                                                   type="number" 
                                                   min="1" 
                                                   max="20"
                                                   class="w-full px-2 py-1 text-sm bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-primary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]">
                                        </div>
                                    </div>
                                    
                                    <p class="text-xs text-[var(--text-muted)] pt-1">
                                        <i class="fas fa-info-circle mr-1 text-[var(--text-accent)]"></i>
                                        Settings apply to all files in this session
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recording View -->
                <div v-else-if="currentView === 'recording'" class="flex-1 flex flex-col p-2 md:p-8 bg-[var(--bg-primary)] min-h-0">
                    <div class="flex-1 flex flex-col max-w-4xl w-full mx-auto bg-[var(--bg-secondary)] rounded-xl border border-[var(--border-primary)] min-h-0 overflow-hidden">
                        <!-- Top: Visualizer and Status (Fixed) -->
                        <div class="flex-shrink-0 p-3 md:p-6 text-center bg-[var(--bg-tertiary)] border-b border-[var(--border-primary)]">
                            <div v-if="isRecording" class="w-full mx-auto mb-3 md:mb-4">
                                <!-- Dual visualizer for 'both' mode -->
                                <div v-if="recordingMode === 'both'" class="max-w-4xl mx-auto flex gap-2 md:gap-4">
                                    <div class="w-1/2 min-h-[8rem] md:min-h-[12rem] h-32 md:h-48 flex flex-col bg-[var(--bg-primary)] rounded-lg p-1.5 md:p-2">
                                        <div class="flex-1 w-full overflow-hidden rounded-md" style="min-height: 6rem;">
                                            <canvas ref="micVisualizer" class="w-full h-full"></canvas>
                                        </div>
                                        <p class="text-xs text-[var(--text-muted)] pt-0.5 md:pt-1" v-text="t('recording.microphone')"></p>
                                    </div>
                                    <div class="w-1/2 min-h-[8rem] md:min-h-[12rem] h-32 md:h-48 flex flex-col bg-[var(--bg-primary)] rounded-lg p-1.5 md:p-2">
                                        <div class="flex-1 w-full overflow-hidden rounded-md" style="min-height: 6rem;">
                                            <canvas ref="systemVisualizer" class="w-full h-full"></canvas>
                                        </div>
                                        <p class="text-xs text-[var(--text-muted)] pt-0.5 md:pt-1" v-text="t('recording.systemAudio')"></p>
                                    </div>
                                </div>
                                <!-- Single visualizer for other modes -->
                                <div v-else class="min-h-[8rem] md:min-h-[12rem] h-32 md:h-48 max-w-2xl mx-auto bg-[var(--bg-primary)] rounded-lg p-1.5 md:p-2 flex flex-col">
                                    <div class="flex-1 w-full overflow-hidden rounded-md" style="min-height: 6rem;">
                                        <canvas ref="visualizer" class="w-full h-full"></canvas>
                                    </div>
                                    <p class="text-xs text-[var(--text-muted)] pt-0.5 md:pt-1 capitalize">${recordingMode}</p>
                                </div>
                            </div>
                            <div v-if="!isRecording && audioBlobURL" class="w-full mb-3 md:mb-4">
                                <div class="audio-player-container">
                                    <audio :src="audioBlobURL" controls class="w-full">
                                        Your browser does not support the audio element.
                                    </audio>
                                </div>
                            </div>

                            <div>
                                <div class="text-xl md:text-2xl font-mono text-[var(--text-accent)]">${formatTime(recordingTime)}</div>
                                <p class="text-xs md:text-sm text-[var(--text-muted)]">${ isRecording ? 'Recording in progress...' : 'Recording finished' }</p>
                                <!-- Real-time file size display -->
                                <div v-if="isRecording && estimatedFileSize > 0" class="mt-1.5">
                                    <p class="text-xs text-[var(--text-muted)]">
                                        Estimated size: <span class="font-mono">${formatFileSize(estimatedFileSize)}</span>
                                        <span v-if="actualBitrate > 0" class="ml-2">
                                            (${Math.round(actualBitrate / 1000)}kbps)
                                        </span>
                                    </p>
                                    <!-- Size warning indicator -->
                                    <div v-if="estimatedFileSize > (maxRecordingMB * 1024 * 1024 * 0.8)" class="mt-0.5">
                                        <div class="flex items-center text-xs text-amber-600 dark:text-amber-400">
                                            <i class="fas fa-exclamation-triangle mr-1"></i>
                                            <span v-text="t('help.approachingLimit', { limit: maxRecordingMB })"></span>
                                        </div>
                                    </div>
                                </div>

                                <!-- Mobile Background Recording Warning - Below timer -->
                                <div v-if="isRecording && isMobileDevice"
                                     class="mt-2 p-2 bg-amber-50 dark:bg-amber-900 dark:bg-opacity-20 border border-amber-300 dark:border-amber-700 rounded">
                                    <div class="flex items-start gap-1.5 text-left">
                                        <i class="fas fa-exclamation-triangle text-amber-600 dark:text-amber-400 flex-shrink-0 text-xs" style="margin-top: 2px;"></i>
                                        <div class="flex-1 min-w-0">
                                            <div class="text-xs text-amber-800 dark:text-amber-200 leading-snug">
                                                <strong class="font-semibold">Keep this app visible!</strong>
                                                <span class="block text-[10px] mt-0.5">Recording pauses if minimized or screen locked.</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Scrollable Content Area: Notes + Actions -->
                        <div class="flex-1 min-h-0 overflow-y-auto flex flex-col">
                            <!-- Middle: Notepad (flexible height) -->
                            <div class="flex-1 p-3 md:p-6 flex flex-col" style="min-height: 200px;">
                                <label for="recordingNotes" class="block text-sm font-medium text-[var(--text-secondary)] mb-1.5 flex-shrink-0">
                                    <i class="fas fa-pencil-alt mr-1"></i>
                                    Recording Notes (Markdown)
                                </label>
                                <div class="flex-1 recording-notes-editor" style="min-height: 150px;">
                                    <textarea ref="recordingNotesEditor" v-model="recordingNotes"
                                              class="w-full h-full bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg p-2 md:p-3 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)] resize-none"
                                              :placeholder="t('form.notesPlaceholder')"></textarea>
                                </div>
                            </div>

                            <!-- Bottom: Action Buttons -->
                            <div class="flex-shrink-0 p-3 md:p-6 bg-[var(--bg-tertiary)] border-t border-[var(--border-primary)]">
                            <div v-if="isRecording" class="text-center">
                                <button @click="stopRecording"
                                        class="px-6 md:px-8 py-2.5 md:py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors animate-pulse text-sm md:text-base">
                                    <i class="fas fa-stop mr-2"></i>Stop Recording
                                </button>
                            </div>
                            <div v-if="!isRecording && audioBlobURL" class="flex flex-col gap-3 md:gap-4">
                                <!-- Tag Selection -->
                                <div>
                                    <label for="recordingTagSelect" class="block text-sm font-medium text-[var(--text-secondary)] mb-1.5 md:mb-2">
                                        <i class="fas fa-tags mr-1"></i>
                                        Select Tags (optional, in priority order)
                                    </label>
                                    
                                    <!-- Selected Tags Display - Compact -->
                                    <div v-if="selectedTags.length > 0" class="mb-2">
                                        <div class="p-1.5 bg-[var(--bg-tertiary)] rounded-md border border-[var(--border-secondary)] max-h-16 overflow-y-auto">
                                            <div class="flex flex-wrap gap-1">
                                                <span v-for="(tag, index) in selectedTags" :key="tag.id" 
                                                      class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[11px] font-medium text-white"
                                                      :style="{ backgroundColor: tag.color }">
                                                    <span class="opacity-75 mr-0.5 text-[9px]">${index + 1}.</span>
                                                    <span>${tag.name}</span>
                                                    <button @click="removeTagFromSelection(tag.id)" 
                                                            class="ml-1 hover:opacity-100 opacity-70">
                                                        <i class="fas fa-times" style="font-size: 9px;"></i>
                                                    </button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Tag Selection Container - Compact -->
                                    <div v-if="availableTags.filter(tag => !selectedTagIds.includes(tag.id)).length > 0" 
                                         class="border border-[var(--border-secondary)] rounded-md bg-[var(--bg-tertiary)] p-2">
                                        <!-- Search Filter -->
                                        <div class="mb-1.5">
                                            <div class="relative">
                                                <input v-model="uploadTagSearchFilter" 
                                                       type="text" 
                                                       :placeholder="t('tagsModal.searchTags')"
                                                       class="w-full px-2 py-1 pl-6 text-xs bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-primary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]">
                                                <i class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-[var(--text-muted)]" style="font-size: 9px;"></i>
                                                <button v-if="uploadTagSearchFilter" 
                                                        @click="uploadTagSearchFilter = ''"
                                                        class="absolute right-2 top-1/2 transform -translate-y-1/2 text-[var(--text-muted)] hover:text-[var(--text-primary)]">
                                                    <i class="fas fa-times" style="font-size: 9px;"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <!-- Available Tags Grid -->
                                        <div v-if="filteredAvailableTagsForUpload.length > 0" 
                                             class="overflow-y-auto" 
                                             style="max-height: 100px;">
                                            <div class="grid grid-cols-2 gap-1">
                                                <button v-for="tag in filteredAvailableTagsForUpload" 
                                                        :key="tag.id"
                                                        @click="addTagToSelection(tag.id)"
                                                        class="group flex items-center justify-between px-1.5 py-1 rounded border border-[var(--border-secondary)] hover:border-[var(--border-focus)] bg-[var(--bg-primary)] hover:bg-[var(--bg-secondary)] transition-all">
                                                    <div class="flex items-center gap-1 min-w-0">
                                                        <span class="w-2 h-2 rounded-full flex-shrink-0" 
                                                              :style="{ backgroundColor: tag.color || '#6B7280' }"></span>
                                                        <span class="text-[11px] text-[var(--text-primary)] truncate" v-text="tag.name"></span>
                                                    </div>
                                                    <i class="fas fa-plus text-[var(--text-muted)] group-hover:text-[var(--text-accent)] transition-colors" style="font-size: 9px;"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div v-else class="py-2 text-center">
                                            <p class="text-[11px] text-[var(--text-muted)]">
                                                <i class="fas fa-search mr-1" style="font-size: 9px;"></i>
                                                No matching tags
                                            </p>
                                        </div>
                                    </div>
                                    <!-- Empty States -->
                                    <div v-else-if="availableTags.length === 0" 
                                         class="p-2 bg-[var(--bg-tertiary)] rounded-md border border-[var(--border-secondary)]">
                                        <p class="text-xs text-[var(--text-muted)] text-center">
                                            <i class="fas fa-info-circle mr-1" style="font-size: 10px;"></i>
                                            <span v-text="t('help.noTagsCreated')"></span> <a href="/account#tags" class="text-[var(--text-accent)] hover:underline" v-text="t('help.createTags')"></a>
                                        </p>
                                    </div>
                                    <div v-else class="p-2 bg-[var(--bg-tertiary)] rounded-md border border-[var(--border-secondary)]">
                                        <p class="text-xs text-[var(--text-muted)] text-center">
                                            <i class="fas fa-check-circle mr-1" style="font-size: 10px;"></i>
                                            All tags selected
                                        </p>
                                    </div>
                                    
                                    <p v-if="selectedTags.some(tag => tag.custom_prompt)" class="text-xs text-[var(--text-muted)] mt-1">
                                        <i class="fas fa-info-circle mr-1 text-[var(--text-accent)]"></i>
                                        Selected tags include custom summary prompts
                                    </p>
                                    <p v-if="selectedTags.length > 0 && useAsrEndpoint && selectedTags.some(tag => tag.default_language || tag.default_min_speakers || tag.default_max_speakers)" 
                                       class="text-xs text-[var(--text-muted)] mt-1">
                                        <i class="fas fa-cog mr-1 text-[var(--text-accent)]"></i>
                                        First tag's ASR settings will be applied: ${selectedTags[0].name}
                                    </p>
                                </div>

                                <!-- Advanced Options for ASR (collapsible) -->
                                <div v-if="useAsrEndpoint">
                                    <button @click="showAdvancedOptions = !showAdvancedOptions" 
                                            class="w-full flex items-center justify-between px-3 py-2 bg-[var(--bg-tertiary)] rounded-md hover:bg-[var(--bg-accent)] transition-colors text-xs font-medium">
                                        <span class="flex items-center gap-2 text-[var(--text-secondary)]">
                                            <i class="fas fa-cog text-[var(--text-muted)]"></i>
                                            <span v-text="t('help.advancedAsrOptions')"></span>
                                        </span>
                                        <i :class="['fas text-[var(--text-muted)]', showAdvancedOptions ? 'fa-chevron-up' : 'fa-chevron-down']"></i>
                                    </button>
                                    
                                    <div v-if="showAdvancedOptions" class="mt-2 p-3 bg-[var(--bg-tertiary)] rounded-md border border-[var(--border-secondary)] space-y-3">
                                        <div>
                                            <label for="recordingAsrLanguage" class="block text-xs font-medium text-[var(--text-secondary)] mb-1">
                                                Language
                                            </label>
                                            <select id="recordingAsrLanguage" v-model="asrLanguage"
                                                    class="w-full px-2 py-1 bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)] text-xs">
                                                <option v-for="lang in languageOptions" :key="lang.value" :value="lang.value" v-text="lang.label"></option>
                                            </select>
                                        </div>
                                        
                                        <div class="grid grid-cols-2 gap-3">
                                            <div>
                                                <label for="recordingAsrMinSpeakers" class="block text-xs font-medium text-[var(--text-secondary)] mb-1" v-text="t('form.minSpeakers')">
                                                </label>
                                                <input type="number" id="recordingAsrMinSpeakers" v-model="asrMinSpeakers"
                                                       min="1" max="20" :placeholder="t('form.auto')"
                                                       class="w-full px-2 py-1 bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)] text-xs">
                                            </div>

                                            <div>
                                                <label for="recordingAsrMaxSpeakers" class="block text-xs font-medium text-[var(--text-secondary)] mb-1" v-text="t('form.maxSpeakers')">
                                                </label>
                                                <input type="number" id="recordingAsrMaxSpeakers" v-model="asrMaxSpeakers"
                                                       min="1" max="20" :placeholder="t('form.auto')"
                                                       class="w-full px-2 py-1 bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)] text-xs">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Upload/Discard Buttons -->
                                <div class="flex flex-col sm:flex-row gap-3 justify-center">
                                    <button @click="uploadRecordedAudio"
                                        class="flex-1 px-6 py-3 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors flex items-center justify-center gap-2">
                                    <i class="fas fa-upload"></i>
                                    <span v-text="t('help.uploadRecordingNotes')"></span>
                                </button>
                                    <button @click="discardRecording"
                                            class="px-6 py-3 bg-[var(--bg-danger)] text-white rounded-lg hover:bg-[var(--bg-danger-hover)] transition-colors flex items-center justify-center gap-2">
                                        <i class="fas fa-trash"></i>
                                        <span v-text="t('help.discard')"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>

                <!-- Recording Detail View -->
                <div v-else-if="currentView === 'detail' && selectedRecording" class="flex-1 flex flex-col overflow-hidden">
                    <!-- Mobile View -->
                    <div v-if="isMobileScreen" class="flex-1 flex flex-col overflow-hidden">
                        <!-- Mobile Header -->
                        <div class="bg-[var(--bg-secondary)] border-b border-[var(--border-primary)] p-4 flex-shrink-0">
                            <div @click="isMetadataExpanded = !isMetadataExpanded" class="cursor-pointer">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1 min-w-0">
                                        <h1 class="text-lg font-bold text-[var(--text-primary)] truncate">
                                            ${selectedRecording.title || 'Untitled Recording'}
                                        </h1>
                                        <p class="text-sm text-[var(--text-muted)] truncate">
                                            ${selectedRecording.participants || t('help.noParticipants')}
                                        </p>
                                        <div v-if="getRecordingTags(selectedRecording).length > 0" class="flex flex-wrap gap-1 mt-2">
                                            <button v-for="tag in getRecordingTags(selectedRecording)" :key="tag.id" 
                                                    @click="filterByTag(tag)"
                                                    class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium text-white hover:opacity-80 transition-opacity cursor-pointer"
                                                    :style="{ backgroundColor: tag.color }"
                                                    :title="'Filter by ' + tag.name">
                                                <i class="fas fa-tag mr-1"></i>
                                                <span v-text="tag.name"></span>
                                            </button>
                                        </div>
                                    </div>
                                    <i :class="['fas', 'fa-chevron-down', 'transition-transform', { 'rotate-180': isMetadataExpanded }]"></i>
                                </div>
                            </div>
                            <!-- Expandable Metadata and Actions -->
                            <div v-if="isMetadataExpanded" class="mt-4 space-y-4">
                                <div class="space-y-2 text-sm text-[var(--text-muted)]">
                                    <div class="flex items-center gap-2">
                                        <i class="fas fa-calendar text-[var(--text-accent)]"></i>
                                        <span>${selectedRecording.meeting_date ? formatDisplayDate(selectedRecording.meeting_date) : 'No date set'}</span>
                                    </div>
                                    <div v-if="activeRecordingMetadata" class="flex flex-wrap items-center gap-x-4 gap-y-2">
                                        <template v-for="(item, index) in activeRecordingMetadata" :key="index">
                                            <!-- Special rendering for tags -->
                                            <div v-if="item.isTagItem" class="flex items-center gap-1.5">
                                                <i :class="item.icon" class="text-[var(--text-muted)]"></i>
                                                <div class="flex flex-wrap items-center gap-1">
                                                    <span v-for="tag in item.tags" :key="tag.id"
                                                          class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full text-white"
                                                          :style="{ backgroundColor: tag.color || '#6B7280' }">
                                                        ${tag.name}
                                                    </span>
                                                </div>
                                            </div>
                                            <!-- Regular metadata items -->
                                            <span v-else class="flex items-center gap-1.5">
                                                <i :class="item.icon"></i>
                                                <span :title="item.fullText || item.text">${item.text}</span>
                                            </span>
                                        </template>
                                    </div>
                                    <div v-if="selectedRecording.status !== 'COMPLETED'" class="flex items-center gap-2">
                                        <span :class="getStatusClass(selectedRecording.status)" class="status-badge">
                                            ${formatStatus(selectedRecording.status)}
                                        </span>
                                    </div>
                                </div>
                                <!-- Action Buttons -->
                                <div class="flex items-center gap-2 overflow-x-auto pb-2">
                                    <button @click="toggleInbox(selectedRecording)" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors" :class="selectedRecording.is_inbox ? 'text-blue-500' : ''" :title="selectedRecording.is_inbox ? t('sidebar.markAsRead') : t('sidebar.moveToInbox')"><i class="fas fa-inbox"></i></button>
                                    <button @click="toggleHighlight(selectedRecording)" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors" :class="selectedRecording.is_highlighted ? 'text-yellow-500' : ''" :title="selectedRecording.is_highlighted ? t('sidebar.removeFromHighlighted') : t('sidebar.highlighted')"><i class="fas fa-star"></i></button>
                                    <button @click="editRecording(selectedRecording)" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors" :title="t('common.edit')"><i class="fas fa-edit"></i></button>
                                    <button @click="editRecordingTags(selectedRecording)" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors" :title="t('tags.title')"><i class="fas fa-tags"></i></button>
                                    <button @click="reprocessTranscription(selectedRecording.id)" v-if="selectedRecording && (selectedRecording.status === 'COMPLETED' || selectedRecording.status === 'FAILED')" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors" :title="useAsrEndpoint ? 'Reprocess with ASR' : 'Reprocess transcription'"><i class="fas fa-redo-alt"></i></button>
                                        <button @click="reprocessSummary(selectedRecording.id)" v-if="selectedRecording && (selectedRecording.status === 'COMPLETED' || selectedRecording.status === 'FAILED')" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors" :title="t('buttons.reprocessSummary')"><i class="fas fa-sync-alt"></i></button>
                                        <button @click="confirmReset(selectedRecording)" v-if="['PROCESSING', 'SUMMARIZING', 'FAILED'].includes(selectedRecording.status)" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors text-orange-500" :title="t('buttons.resetStuckProcessing')"><i class="fas fa-undo"></i></button>
                                    <button @click="openSpeakerModal" v-if="selectedRecording.transcription && useAsrEndpoint" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors" :title="t('buttons.identifySpeakers')"><i class="fas fa-user-tag"></i></button>
                                    <button @click="openShareModal(selectedRecording)" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors" :title="t('buttons.shareRecording')"><i class="fas fa-share-alt"></i></button>
                                    <button @click="confirmDelete(selectedRecording)" class="p-2 rounded-lg hover:bg-[var(--bg-danger-light)] text-[var(--text-danger)] transition-colors"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                        </div>

                        <!-- Mobile Audio Player -->
                        <div class="bg-[var(--bg-secondary)] p-4 border-b border-[var(--border-primary)] flex-shrink-0">
                            <div class="audio-player-container">
                                <audio controls 
                                       :src="'/audio/' + selectedRecording.id" 
                                       :volume="playerVolume"
                                       @volumechange="onPlayerVolumeChange"
                                       class="w-full">
                                    Your browser does not support the audio element.
                                </audio>
                            </div>
                        </div>

                        <!-- Mobile Tab Navigation -->
                        <div class="flex-shrink-0 bg-[var(--bg-tertiary)] border-b border-[var(--border-primary)] flex overflow-x-auto">
                            <button @click="mobileTab = 'transcript'" :class="['flex-1 px-4 py-3 text-sm font-medium transition-colors', mobileTab === 'transcript' ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]' : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]']" v-text="t('transcription.title')"></button>
                            <button @click="mobileTab = 'summary'" :class="['flex-1 px-4 py-3 text-sm font-medium transition-colors', mobileTab === 'summary' ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]' : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]']" v-text="t('summary.title')"></button>
                            <button @click="mobileTab = 'notes'" :class="['flex-1 px-4 py-3 text-sm font-medium transition-colors', mobileTab === 'notes' ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]' : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]']" v-text="t('notes.title')"></button>
                            <button @click="mobileTab = 'chat'" :class="['flex-1 px-4 py-3 text-sm font-medium transition-colors', mobileTab === 'chat' ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]' : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]']" v-text="t('chat.title')"></button>
                            <button v-if="selectedRecording.events && selectedRecording.events.length > 0"
                                    @click="mobileTab = 'events'"
                                    :class="['flex-1 px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap', mobileTab === 'events' ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]' : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]']">
                                <i class="fas fa-calendar-alt mr-1"></i>${ t('events.title') } (${ selectedRecording.events.length })
                            </button>
                        </div>

                        <!-- Mobile Tab Content -->
                        <div class="flex-1 overflow-y-auto p-4">
                            <!-- Transcript Panel -->
                            <div v-if="mobileTab === 'transcript'" class="h-full flex flex-col space-y-4">
                                <div class="flex items-center justify-end gap-2 flex-shrink-0 pr-3">
                                    <div v-if="processedTranscription.hasDialogue" class="view-mode-toggle">
                                        <button @click="toggleTranscriptionViewMode" :class="['toggle-button', transcriptionViewMode === 'simple' ? 'active' : '']"><i class="fas fa-list"></i></button>
                                        <button @click="toggleTranscriptionViewMode" :class="['toggle-button', transcriptionViewMode === 'bubble' ? 'active' : '']"><i class="fas fa-comments"></i></button>
                                    </div>
                                    <button @click="copyTranscription" class="copy-btn" title="Copy transcript"><i class="fas fa-copy"></i></button>
                                    <button @click="downloadTranscript" v-if="selectedRecording && selectedRecording.transcription" class="copy-btn" title="Download transcript with template"><i class="fas fa-download"></i></button>
                                    <button @click="openTranscriptionEditor" v-if="selectedRecording && selectedRecording.transcription" class="copy-btn" title="Edit transcript"><i class="fas fa-edit"></i></button>
                                </div>
                                <div class="flex-grow overflow-y-auto mobile-content-box">
                                    <div v-if="selectedRecording.status === 'PROCESSING'" class="text-center py-8">
                                        <i class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
                                        <p class="mt-2 text-[var(--text-muted)]" v-text="t('help.processingTranscription')"></p>
                                    </div>
                                    <div v-else-if="!selectedRecording.transcription" class="text-center py-8">
                                        <i class="fas fa-file-text text-3xl text-[var(--text-muted)] mb-3"></i>
                                        <p class="text-[var(--text-muted)]" v-text="t('transcription.noTranscription')"></p>
                                    </div>
                                    <div v-else>
                                        <div v-if="!processedTranscription.hasDialogue || transcriptionViewMode === 'simple'" class="transcription-simple-view">
                                            <div v-if="processedTranscription.hasDialogue">
                                                <div v-for="segment in processedTranscription.simpleSegments" :key="segment.startTime || Math.random()" class="speaker-segment" @click="seekAudioFromEvent" :data-start-time="segment.startTime">
                                                    <div v-if="segment.showSpeaker" :class="['speaker-tablet', segment.color]">${segment.speaker}</div>
                                                    <div class="speaker-text">${segment.sentence}</div>
                                                </div>
                                            </div>
                                            <div v-else>
                                                <div v-if="processedTranscription.simpleSegments && processedTranscription.simpleSegments.length > 0">
                                                    <div v-for="segment in processedTranscription.simpleSegments" :key="segment.startTime || Math.random()" class="transcript-segment cursor-pointer hover:bg-[var(--bg-accent-hover)] p-2 rounded transition-colors" @click="seekAudioFromEvent" :data-start-time="segment.startTime">${segment.sentence}</div>
                                                </div>
                                                <div v-else class="whitespace-pre-wrap">${processedTranscription.content}</div>
                                            </div>
                                        </div>
                                        <div v-else-if="transcriptionViewMode === 'bubble'" class="transcription-with-speakers">
                                            <div v-for="(row, rowIndex) in processedTranscription.bubbleRows" :key="`${selectedRecording.id}-bubble-row-${rowIndex}`" :class="['bubble-row', row.isMe ? 'speaker-me' : '']">
                                                <div v-for="bubble in row.bubbles" :key="bubble.startTime || Math.random()" :class="['speaker-bubble', bubble.color, row.isMe ? 'speaker-me' : '']" @click="seekAudioFromEvent" :data-start-time="bubble.startTime">
                                                    <div class="speaker-bubble-content">${bubble.sentence}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Summary Panel -->
                            <div v-if="mobileTab === 'summary'" class="h-full flex flex-col space-y-4">
                                <div class="flex items-center justify-end gap-2 flex-shrink-0 pr-3">
                                    <button @click="copySummary" class="copy-btn" :title="t('buttons.copySummary')"><i class="fas fa-copy"></i></button>
                                    <button @click="downloadSummary" class="copy-btn" :title="t('buttons.downloadAsWord')"><i class="fas fa-download"></i></button>
                                    <button @click="toggleEditSummary" class="copy-btn" :title="t('buttons.editSummary')"><i class="fas fa-edit"></i></button>
                                </div>
                                <div class="flex-grow overflow-y-auto mobile-content-box">
                                    <div v-if="editingSummary" class="h-full flex flex-col">
                                        <div class="markdown-editor-container flex-1">
                                            <textarea ref="summaryMarkdownEditor" v-model="selectedRecording.summary"></textarea>
                                        </div>
                                        <div class="flex justify-end gap-2 mt-2">
                                            <button @click="cancelEditSummary" class="px-3 py-1 text-sm bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-secondary)] rounded hover:bg-[var(--bg-tertiary)]" v-text="t('common.cancel')"></button>
                                            <button @click="saveEditSummary" class="px-3 py-1 text-sm bg-[var(--bg-button)] text-[var(--text-button)] rounded hover:bg-[var(--bg-button-hover)]" v-text="t('common.save')"></button>
                                        </div>
                                    </div>
                                    <div v-else>
                                        <div v-if="selectedRecording.status === 'SUMMARIZING'" class="text-center py-8">
                                            <i class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
                                            <p class="mt-2 text-[var(--text-muted)]" v-text="t('help.generatingSummary')"></p>
                                        </div>
                                        <div v-else-if="!selectedRecording.summary" class="text-center py-8">
                                            <i class="fas fa-file-alt text-3xl text-[var(--text-muted)] mb-3"></i>
                                            <p class="text-[var(--text-muted)] mb-4" v-text="t('summary.noSummary')"></p>
                                            <button @click="generateSummary" 
                                                    class="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-lg shadow-lg hover:shadow-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-200 transform hover:scale-105">
                                                <i class="fas fa-magic mr-2"></i>Generate Summary
                                            </button>
                                        </div>
                                        <div v-else class="summary-box h-full" v-html="selectedRecording.summary_html || selectedRecording.summary"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- Notes Panel -->
                            <div v-if="mobileTab === 'notes'" class="h-full flex flex-col space-y-4">
                                <div class="flex items-center justify-end gap-2 flex-shrink-0 pr-3">
                                    <button @click="copyNotes" class="copy-btn" :title="t('buttons.copyNotes')"><i class="fas fa-copy"></i></button>
                                    <button @click="downloadNotes" class="copy-btn" :title="t('buttons.downloadAsWord')"><i class="fas fa-download"></i></button>
                                    <button @click="toggleEditNotes" class="copy-btn" :title="t('buttons.editNotes')"><i class="fas fa-edit"></i></button>
                                </div>
                                <div class="flex-grow overflow-y-auto mobile-content-box">
                                    <div v-if="editingNotes" class="h-full flex flex-col">
                                        <div class="markdown-editor-container flex-1">
                                            <textarea ref="notesMarkdownEditor" v-model="selectedRecording.notes"></textarea>
                                        </div>
                                        <div class="flex justify-end gap-2 mt-2">
                                            <button @click="cancelEditNotes" class="px-3 py-1 text-sm bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-secondary)] rounded hover:bg-[var(--bg-tertiary)]" v-text="t('common.cancel')"></button>
                                            <button @click="saveEditNotes" class="px-3 py-1 text-sm bg-[var(--bg-button)] text-[var(--text-button)] rounded hover:bg-[var(--bg-button-hover)]" v-text="t('common.save')"></button>
                                        </div>
                                    </div>
                                    <div v-else @click="clickToEditNotes">
                                        <div v-if="!selectedRecording.notes" class="text-center py-8 cursor-pointer hover:text-[var(--text-secondary)]">
                                            <i class="fas fa-sticky-note text-3xl text-[var(--text-muted)] mb-3"></i>
                                            <p class="text-[var(--text-muted)]" v-text="t('help.clickToAddNotes')"></p>
                                        </div>
                                        <div v-else class="notes-box h-full" v-html="selectedRecording.notes_html || selectedRecording.notes"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- Chat Panel -->
                            <div v-if="mobileTab === 'chat'" class="h-full flex flex-col rounded-lg border border-[var(--border-primary)] overflow-hidden relative">
                                <!-- Clear button - fixed at top right -->
                                <button v-if="chatMessages.length > 0"
                                        @click="clearChat"
                                        class="absolute top-2 right-2 p-1 text-[var(--text-muted)] opacity-60 hover:opacity-100 hover:text-[var(--text-danger)] rounded transition-all duration-200 z-20"
                                        title="Clear chat">
                                    <i class="fas fa-times text-xs"></i>
                                </button>

                                <div ref="chatMessagesRef" class="flex-1 overflow-y-auto p-4 space-y-4 bg-[var(--bg-secondary)]">
                                    <div v-if="chatMessages.length === 0" class="text-center py-8">
                                        <i class="fas fa-robot text-3xl text-[var(--text-muted)] mb-3"></i>
                                        <p class="text-[var(--text-muted)]" v-text="t('help.askAboutTranscription')"></p>
                                    </div>
                                    <div v-for="(message, index) in chatMessages" :key="index" 
                                         :class="['message relative group', message.role === 'user' ? 'user-message ml-auto' : 'ai-message', 
                                                  message.role === 'assistant' ? 'pr-10' : '']">
                                        <!-- Copy button for assistant messages -->
                                        <button v-if="message.role === 'assistant'" 
                                                @click="copyMessage(message.content, $event)" 
                                                class="absolute top-2 right-2 p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] rounded transition-all duration-200"
                                                :title="t('buttons.copyMessage')">
                                            <i class="fas fa-copy text-sm"></i>
                                        </button>
                                        <!-- Show thinking content if available -->
                                        <div v-if="message.thinking && message.role === 'assistant'" class="mb-2">
                                            <button @click="message.thinkingExpanded = !message.thinkingExpanded" 
                                                    class="text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)] flex items-center gap-1">
                                                <i :class="['fas', message.thinkingExpanded ? 'fa-chevron-down' : 'fa-chevron-right']"></i>
                                                <span v-text="t('help.modelReasoning')"></span>
                                                <span class="text-[var(--text-muted)]">(${message.thinking.split('\n').length} lines)</span>
                                            </button>
                                            <div v-if="message.thinkingExpanded" 
                                                 class="mt-2 p-3 bg-[var(--bg-tertiary)] border border-[var(--border-secondary)] rounded-lg text-xs text-[var(--text-muted)] max-h-64 overflow-y-auto">
                                                <pre class="whitespace-pre-wrap font-mono">${message.thinking}</pre>
                                            </div>
                                        </div>
                                        <!-- Main message content -->
                                        <div v-if="message.html" v-html="message.html"></div>
                                        <div v-else class="whitespace-pre-wrap">${message.content}</div>
                                    </div>
                                    <div v-if="isChatLoading" class="ai-message">
                                        <i class="fas fa-spinner fa-spin mr-2"></i> Thinking...
                                    </div>
                                </div>
                                <div class="border-t border-[var(--border-primary)] p-4 bg-[var(--bg-tertiary)]">
                                    <div class="flex gap-2">
                                        <textarea v-model="chatInput" @keydown="handleChatKeydown" :disabled="isChatLoading || selectedRecording.status !== 'COMPLETED'" :placeholder="t('chat.placeholder')" class="flex-1 px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)] text-sm" rows="2"></textarea>
                                        <button @click="sendChatMessage" :disabled="!chatInput.trim() || isChatLoading || selectedRecording.status !== 'COMPLETED'" class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                                            <i class="fas fa-paper-plane"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <!-- Events Panel (Mobile) -->
                            <div v-if="mobileTab === 'events' && selectedRecording.events && selectedRecording.events.length > 0" class="h-full flex flex-col space-y-4">
                                <div class="flex items-center justify-end gap-2 flex-shrink-0 pr-3">
                                    <button @click="downloadICS" v-if="selectedRecording.events && selectedRecording.events.length > 0"
                                            class="copy-btn"
                                            :title="t('buttons.exportCalendar')">
                                        <i class="fas fa-calendar-plus"></i>
                                    </button>
                                </div>
                                <div class="flex-grow overflow-y-auto mobile-content-box">
                                    <div class="space-y-3">
                                        <div v-for="event in selectedRecording.events" :key="event.id"
                                             class="bg-[var(--bg-tertiary)] rounded-lg p-3 border border-[var(--border-primary)]">
                                            <div class="flex justify-between items-start mb-2">
                                                <div class="flex-1">
                                                    <h3 class="text-base font-semibold text-[var(--text-primary)] mb-1">
                                                        <i class="fas fa-calendar-check mr-2 text-[var(--text-accent)] text-sm"></i>
                                                        ${ event.title }
                                                    </h3>
                                                    <p v-if="event.description" class="text-xs text-[var(--text-secondary)] mb-2">
                                                        ${ event.description }
                                                    </p>
                                                </div>
                                                <button @click="downloadEventICS(event)"
                                                        class="px-2 py-1 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors text-xs flex items-center gap-1"
                                                        :title="t('events.addToCalendar')">
                                                    <i class="fas fa-download text-xs"></i>
                                                    <span v-text="t('events.add')"></span>
                                                </button>
                                            </div>
                                            <div class="grid grid-cols-1 gap-2 text-xs">
                                                <div class="flex items-center text-[var(--text-muted)]">
                                                    <i class="fas fa-clock mr-2 text-[var(--text-accent)]"></i>
                                                    <span>
                                                        ${ formatEventDateTime(event.start_datetime) }
                                                        <template v-if="event.end_datetime">
                                                            - ${ formatEventDateTime(event.end_datetime, true) }
                                                        </template>
                                                    </span>
                                                </div>
                                                <div v-if="event.location" class="flex items-center text-[var(--text-muted)]">
                                                    <i class="fas fa-map-marker-alt mr-2 text-[var(--text-accent)]"></i>
                                                    <span>${ event.location }</span>
                                                </div>
                                                <div v-if="event.attendees && event.attendees.length > 0" class="flex items-start text-[var(--text-muted)]">
                                                    <i class="fas fa-users mr-2 text-[var(--text-accent)] mt-0.5"></i>
                                                    <div class="flex-1">
                                                        <span v-for="(attendee, index) in event.attendees" :key="index"
                                                              class="inline-block bg-[var(--bg-secondary)] px-2 py-0.5 rounded mr-1 mb-1">
                                                            ${ attendee }
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Desktop View -->
                    <div v-else class="flex-1 flex flex-col overflow-hidden">
                        <!-- Recording Header -->
                        <div class="bg-[var(--bg-secondary)] border-b border-[var(--border-primary)] p-6 flex-shrink-0">
                            <div class="flex flex-col">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1 min-w-0">
                                        <h1 class="text-2xl font-bold text-[var(--text-primary)] mb-2">
                                            ${selectedRecording.title || 'Untitled Recording'}
                                        </h1>
                                    </div>
                                    
                                    <!-- Action Buttons -->
                                    <div class="flex items-center gap-2 ml-4">
                                        <button @click="toggleInbox(selectedRecording)"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                :class="selectedRecording.is_inbox ? 'text-blue-500' : ''"
                                                :title="selectedRecording.is_inbox ? 'Mark as Read' : 'Move to Inbox'">
                                            <i class="fas fa-inbox"></i>
                                        </button>
                                        <button @click="toggleHighlight(selectedRecording)"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                :class="selectedRecording.is_highlighted ? 'text-yellow-500' : ''"
                                                :title="selectedRecording.is_highlighted ? 'Remove Highlight' : 'Highlight'">
                                            <i class="fas fa-star"></i>
                                        </button>
                                        <button @click="editRecording(selectedRecording)" 
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button @click="editRecordingTags(selectedRecording)" 
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                :title="t('buttons.editTags')">
                                            <i class="fas fa-tags"></i>
                                        </button>
                                        <button @click="reprocessTranscription(selectedRecording.id)" v-if="selectedRecording && (selectedRecording.status === 'COMPLETED' || selectedRecording.status === 'FAILED')"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                :title="useAsrEndpoint ? 'Reprocess with ASR' : 'Reprocess transcription'">
                                            <i class="fas fa-redo-alt"></i>
                                        </button>
                                        <button @click="reprocessSummary(selectedRecording.id)" v-if="selectedRecording && (selectedRecording.status === 'COMPLETED' || selectedRecording.status === 'FAILED')"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                :title="t('buttons.reprocessSummary')">
                                            <i class="fas fa-sync-alt"></i>
                                        </button>
                                        <button @click="confirmReset(selectedRecording)" v-if="['PROCESSING', 'SUMMARIZING', 'FAILED'].includes(selectedRecording.status)"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors text-orange-500"
                                                :title="t('buttons.resetStuckProcessing')">
                                            <i class="fas fa-undo"></i>
                                        </button>
                                        <button @click="openSpeakerModal" v-if="selectedRecording.transcription && useAsrEndpoint"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                :title="t('buttons.identifySpeakers')">
                                            <i class="fas fa-user-tag"></i>
                                        </button>
                                        <button @click="openShareModal(selectedRecording)"
                                                class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
                                                :title="t('buttons.shareRecording')">
                                            <i class="fas fa-share-alt"></i>
                                        </button>
                                        <button @click="confirmDelete(selectedRecording)" 
                                                class="p-2 rounded-lg hover:bg-[var(--bg-danger-light)] text-[var(--text-danger)] transition-colors">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- Metadata Row -->
                                <div class="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-[var(--text-muted)] mt-2">
                                    <!-- Participants -->
                                    <div class="flex items-center gap-2">
                                        <i class="fas fa-users text-[var(--text-accent)]"></i>
                                        <span v-if="!editingParticipants" 
                                              @click="toggleEditParticipants"
                                              class="cursor-pointer hover:text-[var(--text-accent)] transition-colors">
                                            ${selectedRecording.participants || t('help.noParticipants')}
                                        </span>
                                        <input v-else 
                                               v-model="selectedRecording.participants" 
                                               @blur="toggleEditParticipants"
                                               @keyup.enter="toggleEditParticipants"
                                               class="bg-transparent border-b border-[var(--border-secondary)] focus:border-[var(--border-focus)] outline-none px-1">
                                    </div>
                                    
                                    <!-- Meeting Date -->
                                    <div class="flex items-center gap-2">
                                        <i class="fas fa-calendar text-[var(--text-accent)]"></i>
                                        <span v-if="!editingMeetingDate" 
                                              @click="toggleEditMeetingDate"
                                              class="cursor-pointer hover:text-[var(--text-accent)] transition-colors">
                                            ${selectedRecording.meeting_date ? formatDisplayDate(selectedRecording.meeting_date) : 'No date set'}
                                        </span>
                                        <input v-else 
                                               v-model="selectedRecording.meeting_date" 
                                               @blur="toggleEditMeetingDate"
                                               @keyup.enter="toggleEditMeetingDate"
                                               type="date"
                                               class="bg-transparent border-b border-[var(--border-secondary)] focus:border-[var(--border-focus)] outline-none px-1">
                                    </div>
                                    
                                    <!-- Other Metadata -->
                                    <div v-if="activeRecordingMetadata" class="flex flex-wrap items-center gap-x-6 gap-y-2">
                                        <template v-for="(item, index) in activeRecordingMetadata" :key="index">
                                            <!-- Special rendering for tags -->
                                            <div v-if="item.isTagItem" class="flex items-center gap-1.5">
                                                <i :class="item.icon" class="text-[var(--text-muted)]"></i>
                                                <div class="flex flex-wrap items-center gap-1">
                                                    <span v-for="tag in item.tags" :key="tag.id"
                                                          class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full text-white"
                                                          :style="{ backgroundColor: tag.color || '#6B7280' }">
                                                        ${tag.name}
                                                    </span>
                                                </div>
                                            </div>
                                            <!-- Regular metadata items -->
                                            <span v-else class="flex items-center gap-1.5">
                                                <i :class="item.icon"></i>
                                                <span :title="item.fullText || item.text">${item.text}</span>
                                            </span>
                                        </template>
                                    </div>
                                    
                                    <!-- Status -->
                                    <div v-if="selectedRecording.status !== 'COMPLETED'" class="flex items-center gap-2">
                                        <span :class="getStatusClass(selectedRecording.status)" class="status-badge">
                                            ${formatStatus(selectedRecording.status)}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Main Content Split View -->
                        <div id="mainContentColumns" class="flex-1 flex overflow-hidden">
                            <!-- Left Panel: Transcription -->
                            <div id="leftMainColumn" class="flex flex-col overflow-hidden" :style="{width: leftColumnWidth + '%'}">
                                <!-- Transcription Header -->
                                <div class="bg-[var(--bg-tertiary)] px-4 py-3 border-b border-[var(--border-primary)] flex items-center justify-between">
                                    <h3 class="font-semibold flex items-center">
                                        <i class="fas fa-file-text mr-2"></i>
                                        <span v-text="t('transcription.title')"></span>
                                    </h3>
                                    <div class="flex items-center gap-2">
                                        <!-- View Mode Toggle -->
                                        <div v-if="processedTranscription.hasDialogue" class="view-mode-toggle">
                                            <button @click="toggleTranscriptionViewMode" 
                                                    :class="['toggle-button', transcriptionViewMode === 'simple' ? 'active' : '']">
                                                <i class="fas fa-list"></i><span v-text="t('transcription.simple')"></span>
                                            </button>
                                            <button @click="toggleTranscriptionViewMode" 
                                                    :class="['toggle-button', transcriptionViewMode === 'bubble' ? 'active' : '']">
                                                <i class="fas fa-comments"></i><span v-text="t('transcription.bubble')"></span>
                                            </button>
                                        </div>
                                        
                                        <!-- Copy Button -->
                                        <button @click="copyTranscription"
                                                class="copy-btn">
                                            <i class="fas fa-copy mr-1"></i><span v-text="t('transcription.copy')"></span>
                                        </button>
                                        <!-- Download Button -->
                                        <button @click="downloadTranscript"
                                                v-if="selectedRecording && selectedRecording.transcription"
                                                class="copy-btn"
                                                title="Download transcript with template">
                                            <i class="fas fa-download mr-1"></i><span v-text="t('transcription.download')"></span>
                                        </button>
                                        <!-- Edit Transcription Button -->
                                        <button @click="openTranscriptionEditor"
                                                v-if="selectedRecording && selectedRecording.transcription"
                                                class="copy-btn">
                                            <i class="fas fa-edit mr-1"></i><span v-text="t('transcription.edit')"></span>
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- Transcription Content -->
                                <div class="flex-1 overflow-y-auto p-4">
                                    <div v-if="selectedRecording.status === 'PROCESSING'" class="text-center py-8">
                                        <i class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
                                        <p class="mt-2 text-[var(--text-muted)]" v-text="t('help.processingTranscription')"></p>
                                    </div>
                                    
                                    <div v-else-if="!selectedRecording.transcription" class="text-center py-8">
                                        <i class="fas fa-file-text text-3xl text-[var(--text-muted)] mb-3"></i>
                                        <p class="text-[var(--text-muted)]" v-text="t('transcription.noTranscription')"></p>
                                    </div>
                                    
                                    <!-- Speaker Legend (for dialogue transcriptions in bubble view only) -->
                                    <div v-if="processedTranscription.hasDialogue && processedTranscription.speakers.length > 0 && transcriptionViewMode === 'bubble'" 
                                         :class="['speaker-legend', legendExpanded ? 'expanded' : '']">
                                        <div class="speaker-legend-header" @click="legendExpanded = !legendExpanded">
                                            <div class="speaker-legend-title">
                                                <i class="fas fa-users"></i>
                                                <span v-text="t('help.speakers')"></span>
                                                <span class="speaker-count-indicator">(${processedTranscription.speakers.length})</span>
                                            </div>
                                            <i class="fas fa-chevron-down speaker-legend-toggle"></i>
                                        </div>
                                        <div class="speaker-legend-content">
                                            <div v-for="(speaker, index) in processedTranscription.speakers" 
                                                 :key="`${selectedRecording.id}-speaker-legend-${index}`" 
                                                 :class="['speaker-legend-item', speaker.color]">
                                                <span class="speaker-name">${speaker.name}</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Transcription Display -->
                                    <div v-if="selectedRecording.transcription">
                                        <!-- Simple View -->
                                        <div v-if="!processedTranscription.hasDialogue || transcriptionViewMode === 'simple'" 
                                             class="transcription-simple-view">
                                            <div v-if="processedTranscription.hasDialogue">
                                                <div v-for="segment in processedTranscription.simpleSegments" 
                                                     :key="segment.startTime || Math.random()" 
                                                     class="speaker-segment"
                                                     @click="seekAudioFromEvent"
                                                     :data-start-time="segment.startTime">
                                                    <div v-if="segment.showSpeaker" 
                                                         :class="['speaker-tablet', segment.color]">
                                                        ${segment.speaker}
                                                    </div>
                                                    <div class="speaker-text">
                                                        ${segment.sentence}
                                                    </div>
                                                </div>
                                            </div>
                                            <div v-else>
                                                <div v-if="processedTranscription.simpleSegments && processedTranscription.simpleSegments.length > 0">
                                                    <div v-for="segment in processedTranscription.simpleSegments" 
                                                         :key="segment.startTime || Math.random()" 
                                                         class="transcript-segment cursor-pointer hover:bg-[var(--bg-accent-hover)] p-2 rounded transition-colors"
                                                         @click="seekAudioFromEvent"
                                                         :data-start-time="segment.startTime">
                                                        ${segment.sentence}
                                                    </div>
                                                </div>
                                                <div v-else class="whitespace-pre-wrap">
                                                    ${processedTranscription.content}
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- Bubble View -->
                                        <div v-else-if="transcriptionViewMode === 'bubble'" 
                                             class="transcription-with-speakers">
                                            <div v-for="(row, rowIndex) in processedTranscription.bubbleRows" 
                                                 :key="`${selectedRecording.id}-bubble-row-${rowIndex}`" 
                                                 :class="['bubble-row', row.isMe ? 'speaker-me' : '']">
                                                <div v-for="bubble in row.bubbles" 
                                                     :key="bubble.startTime || Math.random()" 
                                                     :class="['speaker-bubble', bubble.color, row.isMe ? 'speaker-me' : '']"
                                                     @click="seekAudioFromEvent"
                                                     :data-start-time="bubble.startTime">
                                                    <div class="speaker-bubble-content">
                                                        ${bubble.sentence}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Resizable Divider - Minimal but functional -->
                            <div id="mainColumnResizer" @mousedown="startColumnResize"></div>

                            <!-- Right Panel: Summary/Notes and Chat -->
                            <div id="rightMainColumn" class="flex flex-col overflow-hidden" :style="{width: rightColumnWidth + '%'}">
                                <!-- Audio Player -->
                                <div class="bg-[var(--bg-secondary)] p-4 border-b border-[var(--border-primary)] flex-shrink-0">
                                    <div class="audio-player-container">
                                        <audio controls 
                                               :src="'/audio/' + selectedRecording.id" 
                                               :volume="playerVolume"
                                               @volumechange="onPlayerVolumeChange"
                                               class="w-full">
                                            Your browser does not support the audio element.
                                        </audio>
                                    </div>
                                </div>

                                <!-- Summary/Notes Tabs -->
                                <div :class="{'flex-1': !isChatMaximized, 'flex-none': isChatMaximized}" class="flex flex-col overflow-hidden">
                                    <!-- Tab Navigation -->
                                    <div class="bg-[var(--bg-tertiary)] border-b border-[var(--border-primary)] flex">
                                        <button @click="selectedTab = 'summary'" 
                                                :class="[
                                                    'flex-1 px-4 py-3 text-sm font-medium transition-colors',
                                                    selectedTab === 'summary' 
                                                        ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]' 
                                                        : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
                                                ]">
                                            ${ t('summary.title') }
                                        </button>
                                        <button @click="selectedTab = 'notes'"
                                                :class="[
                                                    'flex-1 px-4 py-3 text-sm font-medium transition-colors',
                                                    selectedTab === 'notes'
                                                        ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]'
                                                        : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
                                                ]">
                                            ${ t('notes.title') }
                                        </button>
                                        <button v-if="selectedRecording.events && selectedRecording.events.length > 0"
                                                @click="selectedTab = 'events'"
                                                :class="[
                                                    'flex-1 px-4 py-3 text-sm font-medium transition-colors',
                                                    selectedTab === 'events'
                                                        ? 'bg-[var(--bg-secondary)] text-[var(--text-accent)] border-b-2 border-[var(--border-focus)]'
                                                        : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
                                                ]">
                                            <i class="fas fa-calendar-alt mr-1"></i>
                                            ${ t('events.title') } (${ selectedRecording.events.length })
                                        </button>
                                    </div>

                                    <!-- Tab Content -->
                                    <div v-if="!isChatMaximized" class="flex-1 overflow-hidden">
                                        <!-- Summary Tab -->
                                        <div v-if="selectedTab === 'summary'" class="h-full p-4 overflow-y-auto">
                                            <div v-if="selectedRecording.status === 'SUMMARIZING'" class="text-center py-8">
                                                <i class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
                                                <p class="mt-2 text-[var(--text-muted)]" v-text="t('summary.summaryInProgress')"></p>
                                            </div>
                                            
                                            <div v-else-if="!selectedRecording.summary" class="text-center py-8">
                                                <i class="fas fa-file-alt text-3xl text-[var(--text-muted)] mb-3"></i>
                                                <p class="text-[var(--text-muted)] mb-4" v-text="t('summary.noSummary')"></p>
                                                <button @click="generateSummary" 
                                                        class="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-medium rounded-lg shadow-lg hover:shadow-xl hover:from-blue-700 hover:to-purple-700 transition-all duration-200 transform hover:scale-105">
                                                    <i class="fas fa-magic mr-2"></i>${ t('summary.generateSummary') }
                                                </button>
                                            </div>
                                            
                                            <div v-else class="content-box relative">
                                                <div v-if="!editingSummary" class="absolute top-2 right-4 flex gap-1 z-10">
                                                    <button @click="copySummary" 
                                                            :title="t('buttons.copySummary')"
                                                            class="w-8 h-8 flex items-center justify-center bg-transparent hover:bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md border border-transparent hover:border-[var(--border-secondary)] transition-all duration-200 opacity-60 hover:opacity-100">
                                                        <i class="fas fa-copy text-sm"></i>
                                                    </button>
                                                    <button @click="downloadSummary" 
                                                            :title="t('buttons.downloadSummary')"
                                                            class="w-8 h-8 flex items-center justify-center bg-transparent hover:bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md border border-transparent hover:border-[var(--border-secondary)] transition-all duration-200 opacity-60 hover:opacity-100">
                                                        <i class="fas fa-download text-sm"></i>
                                                    </button>
                                                    <button @click="toggleEditSummary" 
                                                            :title="t('buttons.editSummary')"
                                                            class="w-8 h-8 flex items-center justify-center bg-transparent hover:bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md border border-transparent hover:border-[var(--border-secondary)] transition-all duration-200 opacity-60 hover:opacity-100">
                                                        <i class="fas fa-edit text-sm"></i>
                                                    </button>
                                                </div>
                                                
                                                <div v-if="!editingSummary" 
                                                     class="summary-box" 
                                                     v-html="selectedRecording.summary_html || selectedRecording.summary">
                                                </div>
                                                <div v-else class="h-full flex flex-col">
                                                    <div class="markdown-editor-container flex-1">
                                                        <textarea ref="summaryMarkdownEditor" 
                                                                  v-model="selectedRecording.summary"
                                                                  class="w-full h-full p-4 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]"
                                                                  :placeholder="t('form.enterSummaryMarkdown')">
                                                        </textarea>
                                                    </div>
                                                    <div class="flex justify-end gap-2 mt-2">
                                                        <button @click="cancelEditSummary" 
                                                                class="px-3 py-1 text-sm bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-secondary)] rounded hover:bg-[var(--bg-tertiary)]">
                                                            Cancel
                                                        </button>
                                                        <button @click="saveEditSummary" 
                                                                class="px-3 py-1 text-sm bg-[var(--bg-button)] text-[var(--text-button)] rounded hover:bg-[var(--bg-button-hover)]">
                                                            Save
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Notes Tab -->
                                        <div v-if="selectedTab === 'notes'" class="h-full p-4 overflow-y-auto">
                                            <div class="content-box h-full relative">
                                                <div v-if="!editingNotes" class="absolute top-2 right-4 flex gap-1 z-10">
                                                    <button @click="copyNotes" 
                                                            :title="t('buttons.copyNotes')"
                                                            class="w-8 h-8 flex items-center justify-center bg-transparent hover:bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md border border-transparent hover:border-[var(--border-secondary)] transition-all duration-200 opacity-60 hover:opacity-100">
                                                        <i class="fas fa-copy text-sm"></i>
                                                    </button>
                                                    <button @click="downloadNotes" 
                                                            :title="t('buttons.downloadNotes')"
                                                            class="w-8 h-8 flex items-center justify-center bg-transparent hover:bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md border border-transparent hover:border-[var(--border-secondary)] transition-all duration-200 opacity-60 hover:opacity-100">
                                                        <i class="fas fa-download text-sm"></i>
                                                    </button>
                                                    <button @click="toggleEditNotes" 
                                                            :title="t('buttons.editNotes')"
                                                            class="w-8 h-8 flex items-center justify-center bg-transparent hover:bg-[var(--bg-secondary)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-md border border-transparent hover:border-[var(--border-secondary)] transition-all duration-200 opacity-60 hover:opacity-100">
                                                        <i class="fas fa-edit text-sm"></i>
                                                    </button>
                                                </div>
                                                
                                                <div v-if="!editingNotes" 
                                                     class="notes-box h-full"
                                                     @click="clickToEditNotes">
                                                    <div v-if="selectedRecording.notes_html" 
                                                         v-html="selectedRecording.notes_html">
                                                    </div>
                                                    <div v-else-if="selectedRecording.notes" 
                                                         class="whitespace-pre-wrap">
                                                        ${selectedRecording.notes}
                                                    </div>
                                                    <div v-else class="text-[var(--text-muted)] italic cursor-pointer hover:text-[var(--text-secondary)]">
                                                        ${ t('help.clickToAddNotes') }
                                                    </div>
                                                </div>
                                                
                                                <div v-else class="h-full flex flex-col">
                                                    <div class="markdown-editor-container flex-1">
                                                        <textarea ref="notesMarkdownEditor" 
                                                                  v-model="selectedRecording.notes"
                                                                  class="w-full h-full p-4 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]"
                                                                  :placeholder="t('form.enterNotesMarkdown')">
                                                        </textarea>
                                                    </div>
                                                    <div class="flex justify-end gap-2 mt-2">
                                                        <button @click="cancelEditNotes" 
                                                                class="px-3 py-1 text-sm bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-secondary)] rounded hover:bg-[var(--bg-tertiary)]">
                                                            Cancel
                                                        </button>
                                                        <button @click="saveEditNotes" 
                                                                class="px-3 py-1 text-sm bg-[var(--bg-button)] text-[var(--text-button)] rounded hover:bg-[var(--bg-button-hover)]">
                                                            Save
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Events Tab -->
                                        <div v-if="selectedTab === 'events' && selectedRecording.events && selectedRecording.events.length > 0" class="h-full p-4 overflow-y-auto">
                                            <div class="space-y-4">
                                                <div v-for="event in selectedRecording.events" :key="event.id"
                                                     class="bg-[var(--bg-tertiary)] rounded-lg p-4 border border-[var(--border-primary)] hover:border-[var(--border-accent)] transition-colors">
                                                    <div class="flex justify-between items-start mb-3">
                                                        <div class="flex-1">
                                                            <h3 class="text-lg font-semibold text-[var(--text-primary)] mb-1">
                                                                <i class="fas fa-calendar-check mr-2 text-[var(--text-accent)]"></i>
                                                                ${ event.title }
                                                            </h3>
                                                            <p v-if="event.description" class="text-sm text-[var(--text-secondary)] mb-2">
                                                                ${ event.description }
                                                            </p>
                                                        </div>
                                                        <button @click="downloadEventICS(event)"
                                                                class="px-3 py-1.5 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors text-sm flex items-center gap-1.5"
                                                                :title="t('events.addToCalendar')">
                                                            <i class="fas fa-download"></i>
                                                            <span v-text="t('events.addToCalendar')"></span>
                                                        </button>
                                                    </div>

                                                    <div class="space-y-2 text-sm">
                                                        <div class="flex items-center gap-2" v-if="event.start_datetime">
                                                            <i class="fas fa-clock text-[var(--text-muted)] w-4"></i>
                                                            <span class="text-[var(--text-secondary)]">
                                                                <strong v-text="t('events.start') + ':'"></strong> ${ formatEventDateTime(event.start_datetime) }
                                                            </span>
                                                        </div>
                                                        <div class="flex items-center gap-2" v-if="event.end_datetime">
                                                            <i class="fas fa-clock text-[var(--text-muted)] w-4"></i>
                                                            <span class="text-[var(--text-secondary)]">
                                                                <strong v-text="t('events.end') + ':'"></strong> ${ formatEventDateTime(event.end_datetime) }
                                                            </span>
                                                        </div>
                                                        <div class="flex items-center gap-2" v-if="event.location">
                                                            <i class="fas fa-map-marker-alt text-[var(--text-muted)] w-4"></i>
                                                            <span class="text-[var(--text-secondary)]">
                                                                <strong v-text="t('events.location') + ':'"></strong> ${ event.location }
                                                            </span>
                                                        </div>
                                                        <div class="flex items-start gap-2" v-if="event.attendees && event.attendees.length > 0">
                                                            <i class="fas fa-users text-[var(--text-muted)] w-4 mt-0.5"></i>
                                                            <div class="text-[var(--text-secondary)]">
                                                                <strong v-text="t('events.attendees') + ':'"></strong>
                                                                <span class="ml-1">${ event.attendees.join(', ') }</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div v-if="selectedRecording.events.length === 0" class="text-center py-8">
                                                    <i class="fas fa-calendar-times text-3xl text-[var(--text-muted)] mb-3"></i>
                                                    <p class="text-[var(--text-muted)]" v-text="t('events.noEvents')"></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Chat Section -->
                                <div class="border-t border-[var(--border-primary)] flex flex-col" :class="{'flex-1 overflow-hidden': isChatMaximized}">
                                    <!-- Chat Toggle -->
                                    <div class="bg-[var(--bg-tertiary)] px-4 py-3 hover:bg-[var(--bg-accent-hover)] transition-colors flex items-center">
                                        <button @click="() => { showChat = !showChat; if (!showChat) isChatMaximized = false; }"
                                                class="flex-1 text-left flex items-center">
                                            <span class="font-medium flex items-center">
                                                <i class="fas fa-comments mr-2"></i>
                                                ${ t('chat.chatWithTranscription') }
                                            </span>
                                        </button>
                                        <div class="flex items-center gap-2">
                                            <button v-if="chatMessages.length > 0"
                                                    @click="downloadChat"
                                                    class="p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
                                                    :title="t('buttons.downloadChat')">
                                                <i class="fas fa-download text-sm"></i>
                                            </button>
                                            <button @click="toggleChatMaximize"
                                                    class="p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors"
                                                    :title="isChatMaximized ? 'Restore chat' : 'Maximize chat'">
                                                <i :class="['fas text-sm', isChatMaximized ? 'fa-compress' : 'fa-expand']"></i>
                                            </button>
                                            <button @click="() => { showChat = !showChat; if (!showChat) isChatMaximized = false; }"
                                                    class="p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)]">
                                                <i :class="['fas transition-transform duration-200', showChat ? 'fa-chevron-down' : 'fa-chevron-up']"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Chat Content -->
                                    <div v-if="showChat" class="flex flex-col relative" :class="isChatMaximized ? 'flex-1 overflow-hidden' : 'max-h-96'">
                                        <!-- Clear button - fixed at top right -->
                                        <button v-if="chatMessages.length > 0"
                                                @click="clearChat"
                                                class="absolute top-2 right-2 p-1 text-[var(--text-muted)] opacity-60 hover:opacity-100 hover:text-[var(--text-danger)] rounded transition-all duration-200 z-20"
                                                title="Clear chat">
                                            <i class="fas fa-times text-xs"></i>
                                        </button>

                                        <!-- Chat Messages -->
                                        <div ref="chatMessagesRef"
                                             class="flex-1 overflow-y-auto p-4 space-y-4 bg-[var(--bg-secondary)]">
                                            <div v-if="chatMessages.length === 0" class="text-center py-8">
                                                <i class="fas fa-robot text-3xl text-[var(--text-muted)] mb-3"></i>
                                                <p class="text-[var(--text-muted)]" v-text="t('help.askAboutTranscription')"></p>
                                            </div>
                                            
                                            <div v-for="(message, index) in chatMessages" 
                                                 :key="index" 
                                                 :class="[
                                                     'message relative group',
                                                     message.role === 'user' ? 'user-message ml-auto' : 'ai-message',
                                                     message.role === 'assistant' ? 'pr-10' : ''
                                                 ]">
                                                <!-- Copy button for assistant messages -->
                                                <button v-if="message.role === 'assistant'" 
                                                        @click="copyMessage(message.content, $event)" 
                                                        class="absolute top-2 right-2 p-1 text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] rounded transition-all duration-200"
                                                        :title="t('buttons.copyMessage')">
                                                    <i class="fas fa-copy text-sm"></i>
                                                </button>
                                                <!-- Show thinking content if available -->
                                                <div v-if="message.thinking && message.role === 'assistant'" class="mb-2">
                                                    <button @click="message.thinkingExpanded = !message.thinkingExpanded" 
                                                            class="text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)] flex items-center gap-1">
                                                        <i :class="['fas', message.thinkingExpanded ? 'fa-chevron-down' : 'fa-chevron-right']"></i>
                                                        <span v-text="t('help.modelReasoning')"></span>
                                                        <span class="text-[var(--text-muted)]">(${message.thinking.split('\n').length} lines)</span>
                                                    </button>
                                                    <div v-if="message.thinkingExpanded" 
                                                         class="mt-2 p-3 bg-[var(--bg-tertiary)] border border-[var(--border-secondary)] rounded-lg text-xs text-[var(--text-muted)] max-h-64 overflow-y-auto">
                                                        <pre class="whitespace-pre-wrap font-mono">${message.thinking}</pre>
                                                    </div>
                                                </div>
                                                <!-- Main message content -->
                                                <div v-if="message.html" v-html="message.html"></div>
                                                <div v-else class="whitespace-pre-wrap">${message.content}</div>
                                            </div>
                                            
                                            <div v-if="isChatLoading" class="ai-message">
                                                <i class="fas fa-spinner fa-spin mr-2"></i>
                                                ${ t('chat.thinking') }
                                            </div>
                                        </div>

                                        <!-- Chat Input -->
                                        <div class="border-t border-[var(--border-primary)] p-4 bg-[var(--bg-tertiary)]">
                                            <div class="flex gap-2">
                                                <textarea v-model="chatInput" 
                                                          @keydown="handleChatKeydown"
                                                          :disabled="isChatLoading || selectedRecording.status !== 'COMPLETED'"
                                                          :placeholder="t('chat.placeholderWithHint')"
                                                          class="flex-1 px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)] text-sm"
                                                          rows="2">
                                                </textarea>
                                                <button @click="sendChatMessage" 
                                                        :disabled="!chatInput.trim() || isChatLoading || selectedRecording.status !== 'COMPLETED'"
                                                        class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                                                    <i class="fas fa-paper-plane"></i>
                                                </button>
                                            </div>
                                            <p v-if="selectedRecording.status !== 'COMPLETED'" 
                                               class="text-xs text-[var(--text-muted)] mt-2">
                                                ${ t('chat.availableAfterTranscription') }
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Empty State -->
                <div v-else-if="currentView === 'detail' && !selectedRecording" class="flex-1 flex items-center justify-center">
                    <div class="text-center">
                        <i class="fas fa-microphone text-6xl text-[var(--text-muted)] mb-4"></i>
                        <h2 class="text-2xl font-bold mb-2" v-text="t('colorScheme.selectRecording')"></h2>
                        <p class="text-[var(--text-muted)] mb-6" v-text="t('colorScheme.chooseRecording')"></p>
                        <button @click="switchToUploadView" 
                                class="px-6 py-3 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors">
                            <i class="fas fa-plus mr-2"></i>Upload New Recording
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Upload Progress Popup -->
        <div v-if="uploadQueue.length > 0 && !progressPopupClosed" 
             :class="[
                 'fixed bottom-4 left-4 z-[100] w-96 transition-all duration-300',
                 progressPopupMinimized ? 'minimized' : ''
             ]">
            <div class="bg-[var(--bg-secondary)] border-2 border-[var(--bg-accent)] rounded-lg shadow-2xl overflow-hidden backdrop-blur-sm bg-opacity-95 
                        ring-4 ring-[var(--bg-accent)] ring-opacity-20"
                 style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px var(--bg-accent), 0 0 20px rgba(var(--bg-accent-rgb), 0.3)">
                <!-- Progress Header -->
                <div class="bg-gradient-to-r from-[var(--bg-accent)] to-[var(--bg-accent-hover)] px-4 py-3">
                    <!-- Top row: Title and buttons -->
                    <div class="flex items-center justify-between mb-2">
                        <div class="flex items-center gap-2 min-w-0">
                            <i class="fas fa-upload text-gray-800 dark:text-white animate-pulse"></i>
                            <span class="font-semibold text-gray-800 dark:text-white truncate" v-text="t('uploadProgress.title')"></span>
                        </div>
                        <div class="flex items-center gap-2 flex-shrink-0">
                            <button v-if="completedInQueue > 0" @click="clearCompletedUploads()" 
                                    class="px-2 py-0.5 text-xs bg-black dark:bg-white bg-opacity-10 dark:bg-opacity-20 hover:bg-opacity-20 dark:hover:bg-opacity-30 rounded transition-all duration-200 text-gray-800 dark:text-white font-medium"
                                    :title="t('buttons.clearCompleted')">
                                Clear
                            </button>
                            <button @click="progressPopupMinimized = !progressPopupMinimized" 
                                    class="p-1 rounded hover:bg-black dark:hover:bg-white hover:bg-opacity-10 dark:hover:bg-opacity-20 transition-colors text-gray-800 dark:text-white">
                                <i :class="progressPopupMinimized ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
                            </button>
                            <button @click="progressPopupClosed = true" 
                                    class="p-1 rounded hover:bg-red-600 dark:hover:bg-red-500 hover:bg-opacity-20 dark:hover:bg-opacity-30 text-gray-800 dark:text-white hover:text-white transition-colors">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <!-- Overall Progress Bar -->
                    <div class="space-y-1">
                        <div class="flex justify-between items-center text-xs text-gray-800 dark:text-white">
                            <span class="font-medium">${completedInQueue} of ${totalInQueue} files</span>
                            <span class="font-bold">${Math.round((completedInQueue / Math.max(totalInQueue, 1)) * 100)}%</span>
                        </div>
                        <div class="w-full bg-black dark:bg-white bg-opacity-10 dark:bg-opacity-20 rounded-full h-2 overflow-hidden">
                            <div class="bg-white dark:bg-white bg-opacity-80 dark:bg-opacity-90 h-full rounded-full transition-all duration-500 ease-out relative overflow-hidden" 
                                 :style="{width: (completedInQueue / Math.max(totalInQueue, 1) * 100) + '%'}">
                                <div class="absolute inset-0 bg-white opacity-30 animate-pulse"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Progress Content -->
                <div v-if="!progressPopupMinimized" class="p-3 max-h-64 overflow-y-auto">
                    <div v-if="currentlyProcessingFile" class="mb-3 p-3 bg-[var(--bg-accent)] bg-opacity-10 border border-[var(--border-accent)] rounded-lg">
                        <div class="flex items-center justify-between mb-2">
                            <span class="font-semibold truncate min-w-0 text-sm text-[var(--text-primary)]">${currentlyProcessingFile.file.name}</span>
                            <span class="text-sm flex-shrink-0 ml-2 font-bold text-[var(--text-accent)]">${processingProgress}%</span>
                        </div>
                        <div class="w-full bg-[var(--bg-tertiary)] rounded-full h-2 mb-2 overflow-hidden">
                            <div class="bg-gradient-to-r from-[var(--bg-accent)] to-[var(--bg-accent-hover)] h-full rounded-full transition-all duration-300 relative" 
                                 :style="{width: processingProgress + '%'}">
                                <div class="absolute inset-0 bg-white opacity-20 animate-pulse"></div>
                            </div>
                        </div>
                        <p class="text-xs text-[var(--text-secondary)] font-medium">${processingMessage}</p>
                    </div>

                    <div v-if="finishedFilesInQueue.length > 0" class="space-y-2">
                        <h4 class="text-xs font-semibold text-[var(--text-secondary)] uppercase tracking-wider opacity-70" v-text="t('help.completedFiles')"></h4>
                        <div v-for="item in finishedFilesInQueue" 
                             :key="item.clientId" 
                             class="progress-list-item p-2 bg-[var(--bg-tertiary)] bg-opacity-50 rounded-lg flex items-center gap-2 hover:bg-opacity-70 transition-all duration-200">
                            <i :class="[
                                'fas',
                                item.status === 'completed' ? 'fa-check-circle text-green-500' : 'fa-exclamation-circle text-red-500'
                            ]"></i>
                            <span class="truncate text-sm flex-1 text-[var(--text-primary)]">${item.file.name}</span>
                            <span :class="[
                                'text-xs px-2 py-1 rounded-full font-semibold',
                                item.status === 'completed' ? 'bg-green-500 bg-opacity-20 text-green-600 dark:text-green-400' : 'bg-red-500 bg-opacity-20 text-red-600 dark:text-red-400'
                            ]">
                                ${item.status === 'completed' ? t('tagsModal.done') : t('status.failed')}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modals -->
        <!-- Edit Modal -->
        <div v-if="showEditModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-lg">
                <div class="p-6 border-b border-[var(--border-primary)]">
                    <h3 class="text-lg font-semibold" v-text="t('modal.editRecording')"></h3>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label class="block text-sm font-medium mb-2" v-text="t('form.title')"></label>
                        <input v-model="editingRecording.title" 
                               class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2" v-text="t('form.participants')"></label>
                        <input v-model="editingRecording.participants" 
                               class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2" v-text="t('form.meetingDate')"></label>
                        <input v-model="editingRecording.meeting_date" 
                               type="date"
                               class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2" v-text="t('form.notes')"></label>
                        <textarea v-model="editingRecording.notes" 
                                  rows="4"
                                  class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)]">
                        </textarea>
                    </div>
                </div>
                <div class="p-6 border-t border-[var(--border-primary)] flex justify-end gap-3">
                    <button @click="cancelEdit" 
                            class="px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
                        Cancel
                    </button>
                    <button @click="saveEdit" 
                            class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors">
                        Save Changes
                    </button>
                </div>
            </div>
        </div>

        <!-- Delete Confirmation Modal -->
        <div v-if="showDeleteModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-md">
                <div class="p-6">
                    <div class="flex items-center gap-4 mb-4">
                        <i class="fas fa-exclamation-triangle text-3xl text-[var(--text-danger)]"></i>
                        <div>
                            <h3 class="text-lg font-semibold" v-text="t('modal.deleteRecording')"></h3>
                            <p class="text-[var(--text-muted)]" v-text="t('help.thisActionCannotBeUndone')"></p>
                        </div>
                    </div>
                    <p class="text-[var(--text-secondary)] mb-6">
                        Are you sure you want to delete "${recordingToDelete?.title || 'this recording'}"?
                    </p>
                    <div class="flex justify-end gap-3">
                        <button @click="cancelDelete" 
                                class="px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
                            Cancel
                        </button>
                        <button @click="deleteRecording" 
                                class="px-4 py-2 bg-[var(--bg-danger)] text-white rounded-lg hover:bg-[var(--bg-danger-hover)] transition-colors">
                            Delete
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Edit Recording Tags Modal -->
        <div v-if="showEditTagsModal" @click="closeEditTagsModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div @click.stop class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-lg max-h-[80vh] flex flex-col">
                <div class="flex-shrink-0 p-6 border-b border-[var(--border-primary)]">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-medium text-[var(--text-primary)]" v-text="t('modal.editTags')"></h3>
                        <button @click="closeEditTagsModal" class="text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="flex-1 overflow-y-auto p-6 space-y-4">
                    <!-- Current Tags Section -->
                    <div>
                        <label class="block text-sm font-medium text-[var(--text-secondary)] mb-3">
                            <i class="fas fa-tags mr-1 text-[var(--text-muted)]"></i>
                            <span v-text="t('tagsModal.currentTags')"></span>
                        </label>
                        <div v-if="getRecordingTags(editingRecording).length > 0" class="p-2 bg-[var(--bg-primary)] rounded-md border border-[var(--border-secondary)] max-h-20 overflow-y-auto">
                            <div class="flex flex-wrap gap-1">
                                <span v-for="tag in getRecordingTags(editingRecording)" :key="tag.id"
                                      class="group inline-flex items-center px-1.5 py-0.5 rounded-full text-[11px] font-medium text-white transition-all"
                                      :style="{ backgroundColor: tag.color }">
                                    <span v-text="tag.name"></span>
                                    <button @click="removeTagFromRecording(tag.id)" 
                                            class="ml-1 opacity-70 hover:opacity-100 transition-opacity">
                                        <i class="fas fa-times" style="font-size: 9px;"></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                        <div v-else class="p-4 bg-[var(--bg-tertiary)] rounded-lg border border-[var(--border-secondary)]">
                            <p class="text-sm text-[var(--text-muted)] text-center">
                                <i class="fas fa-inbox mr-1"></i>
                                <span v-text="t('tagsModal.noTagsAssigned')"></span>
                            </p>
                        </div>
                    </div>
                    
                    <!-- Add Tags Section -->
                    <div>
                        <label class="block text-sm font-medium text-[var(--text-secondary)] mb-3">
                            <i class="fas fa-plus-circle mr-1 text-[var(--text-muted)]"></i>
                            <span v-text="t('tagsModal.addTags')"></span>
                        </label>
                        
                        <!-- Search Filter (always visible if tags available) -->
                        <div v-if="getAvailableTagsForRecording(editingRecording).length > 0" class="mb-2">
                            <div class="relative">
                                <input v-model="tagSearchFilter" 
                                       type="text" 
                                       :placeholder="t('tagsModal.searchTags')"
                                       class="w-full px-2 py-1 pl-6 text-xs bg-[var(--bg-primary)] text-[var(--text-primary)] border border-[var(--border-primary)] rounded focus:outline-none focus:ring-1 focus:ring-[var(--ring-focus)]">
                                <i class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-[var(--text-muted)]" style="font-size: 9px;"></i>
                                <button v-if="tagSearchFilter" 
                                        @click="tagSearchFilter = ''"
                                        class="absolute right-2 top-1/2 transform -translate-y-1/2 text-[var(--text-muted)] hover:text-[var(--text-primary)]">
                                    <i class="fas fa-times" style="font-size: 9px;"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- Available Tags Grid - Fixed Height -->
                        <div v-if="filteredAvailableTagsForModal.length > 0" 
                             class="border border-[var(--border-secondary)] rounded-md p-1.5 bg-[var(--bg-primary)]" 
                             style="max-height: 150px; overflow-y: auto;">
                            <div class="grid grid-cols-2 gap-1">
                                <button v-for="tag in filteredAvailableTagsForModal" 
                                        :key="tag.id"
                                        @click="addTagToRecording(tag.id)"
                                        class="group flex items-center justify-between px-1.5 py-1 rounded border border-[var(--border-secondary)] hover:border-[var(--border-focus)] bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] transition-all">
                                    <div class="flex items-center gap-1 min-w-0">
                                        <span class="w-2 h-2 rounded-full flex-shrink-0" 
                                              :style="{ backgroundColor: tag.color || '#6B7280' }"></span>
                                        <span class="text-[11px] text-[var(--text-primary)] truncate" v-text="tag.name"></span>
                                    </div>
                                    <i class="fas fa-plus text-[var(--text-muted)] group-hover:text-[var(--text-accent)] transition-colors" style="font-size: 9px;"></i>
                                </button>
                            </div>
                        </div>
                        <div v-else-if="getAvailableTagsForRecording(editingRecording).length > 0" 
                             class="p-4 bg-[var(--bg-tertiary)] rounded-lg border border-[var(--border-secondary)]">
                            <p class="text-sm text-[var(--text-muted)] text-center">
                                <i class="fas fa-search mr-1"></i>
                                No tags match your filter
                            </p>
                        </div>
                        <div v-else class="p-4 bg-[var(--bg-tertiary)] rounded-lg border border-[var(--border-secondary)]">
                            <p class="text-sm text-[var(--text-muted)] text-center">
                                <i class="fas fa-check-circle mr-1"></i>
                                All available tags have been added
                            </p>
                        </div>
                    </div>
                </div>
                <div class="flex-shrink-0 px-6 py-4 bg-[var(--bg-tertiary)] border-t border-[var(--border-primary)] flex justify-end gap-3 rounded-b-lg">
                    <button @click="closeEditTagsModal" 
                            class="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-primary)] rounded-md hover:bg-[var(--bg-button-hover)] transition-colors">
                        <span v-text="t('tagsModal.done')"></span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Color Scheme Modal -->
        <div v-if="showColorSchemeModal" class="color-scheme-modal" @click.self="closeColorSchemeModal">
            <div class="color-scheme-modal-content">
                <div class="color-scheme-header">
                    <h2 class="color-scheme-title">
                        <i class="fas fa-palette"></i>
                        Choose Color Scheme
                    </h2>
                    <p class="color-scheme-subtitle" v-text="t('colorScheme.subtitle')"></p>
                </div>
                
                <div class="color-scheme-body">
                    <div class="color-scheme-section">
                        <h3 class="color-scheme-section-title">
                            <i :class="isDarkMode ? 'fas fa-moon' : 'fas fa-sun'"></i>
                            ${isDarkMode ? 'Dark' : 'Light'} Themes
                        </h3>
                        <div class="color-scheme-grid">
                            <div v-for="scheme in colorSchemes[isDarkMode ? 'dark' : 'light']" 
                                 :key="scheme.id"
                                 @click="selectColorScheme(scheme.id)"
                                 :class="['color-scheme-option', currentColorScheme === scheme.id ? 'active' : '']">
                                <div class="color-scheme-preview">
                                    <div :class="`preview-${isDarkMode ? 'dark-' : ''}${scheme.id}-primary color-scheme-preview-segment`"></div>
                                    <div :class="`preview-${isDarkMode ? 'dark-' : ''}${scheme.id}-secondary color-scheme-preview-segment`"></div>
                                    <div :class="`preview-${isDarkMode ? 'dark-' : ''}${scheme.id}-tertiary color-scheme-preview-segment`"></div>
                                </div>
                                <div class="color-scheme-name">${scheme.name}</div>
                                <div class="color-scheme-description">${scheme.description}</div>
                                <div v-if="currentColorScheme === scheme.id" class="color-scheme-check">
                                    <i class="fas fa-check"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="color-scheme-footer">
                    <button @click="resetColorScheme" class="color-scheme-reset-btn">
                        <i class="fas fa-undo mr-2"></i>Reset to Default
                    </button>
                    <button @click="closeColorSchemeModal" class="color-scheme-close-btn">
                        Close
                    </button>
                </div>
            </div>
        </div>

        <!-- Reprocess Confirmation Modal -->
        <div v-if="showReprocessModal" @click="cancelReprocess" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm transition-all duration-300 ease-in-out">
            <div @click.stop class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-300 ease-in-out">
                <!-- Header with gradient background -->
                <div class="bg-gradient-to-r from-[var(--bg-accent)] to-[var(--bg-secondary)] p-5 rounded-t-xl flex items-center">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center mr-4 shadow-lg">
                            <i class="fas fa-sync-alt text-white text-lg"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-[var(--text-primary)] mb-1" v-text="t('help.confirmReprocessingTitle')"></h3>
                            <p class="text-sm text-[var(--text-muted)] capitalize">${ reprocessType } reprocessing</p>
                        </div>
                    </div>
                </div>
                
                <!-- Content -->
                <div class="p-6 modal-content">
                    <div v-if="reprocessRecording" class="mb-6">
                        <div class="bg-[var(--bg-tertiary)] rounded-lg p-4 border border-[var(--border-primary)]">
                            <div class="flex items-start space-x-3">
                                <i class="fas fa-file-audio text-[var(--text-accent)] mt-1"></i>
                                <div class="flex-1 min-w-0">
                                    <h4 class="font-medium text-[var(--text-primary)] truncate" :title="reprocessRecording.title">
                                        ${ reprocessRecording.title || 'Untitled Recording' }
                                    </h4>
                                    <p class="text-sm text-[var(--text-muted)] mt-1">
                                        Created: ${ new Date(reprocessRecording.created_at).toLocaleDateString() }
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="flex items-start space-x-3">
                            <div class="w-6 h-6 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-exclamation-triangle text-amber-600 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-[var(--text-secondary)] font-medium mb-1" v-text="t('help.whatWillHappen')"></p>
                                <p class="text-sm text-[var(--text-muted)]" v-if="reprocessType === 'transcription' && !useAsrEndpoint">
                                    <span v-text="t('reprocessModal.audioReTranscribedFromScratch')"></span>
                                </p>
                                <p class="text-sm text-[var(--text-muted)]" v-else-if="reprocessType === 'transcription' && useAsrEndpoint">
                                    <span v-text="t('reprocessModal.audioReTranscribedWithAsr')"></span>
                                </p>
                                <p class="text-sm text-[var(--text-muted)]" v-else-if="reprocessType === 'summary'">
                                    <span v-text="t('reprocessModal.newTitleAndSummary')"></span>
                                </p>
                            </div>
                        </div>
                        
                        <!-- ASR Options -->
                        <div v-if="reprocessType === 'transcription' && useAsrEndpoint" class="space-y-4 pt-4 border-t border-[var(--border-primary)]">
                            <h4 class="text-md font-semibold text-[var(--text-secondary)]" v-text="t('help.advancedAsrOptions')"></h4>
                            <div>
                                <label for="asr-language-reprocess" class="block text-sm font-medium text-[var(--text-muted)]" v-text="t('form.language')"></label>
                                <input type="text" id="asr-language-reprocess" v-model="asrReprocessOptions.language" class="mt-1 block w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)]" placeholder="e.g., en, es, zh (optional)">
                            </div>
                            <div>
                                <label for="asr-min-speakers-reprocess" class="block text-sm font-medium text-[var(--text-muted)]" v-text="t('form.minSpeakers')"></label>
                                <input type="number" id="asr-min-speakers-reprocess" v-model.number="asrReprocessOptions.min_speakers" class="mt-1 block w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)]" :placeholder="t('form.optional')">
                            </div>
                            <div>
                                <label for="asr-max-speakers-reprocess" class="block text-sm font-medium text-[var(--text-muted)]" v-text="t('form.maxSpeakers')"></label>
                                <input type="number" id="asr-max-speakers-reprocess" v-model.number="asrReprocessOptions.max_speakers" class="mt-1 block w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)]" :placeholder="t('form.optional')">
                            </div>
                        </div>

                        <!-- Custom Prompt Options for Summary Reprocessing -->
                        <div v-if="reprocessType === 'summary'" class="space-y-4 pt-4 border-t border-[var(--border-primary)]">
                            <h4 class="text-md font-semibold text-[var(--text-secondary)]">Custom Summarization Prompt</h4>

                            <!-- Prompt Source Selection -->
                            <div>
                                <label class="block text-sm font-medium text-[var(--text-muted)] mb-2">Prompt Source</label>
                                <div class="space-y-2">
                                    <label class="flex items-center space-x-2 cursor-pointer">
                                        <input type="radio" v-model="summaryReprocessPromptSource" value="default" class="text-[var(--text-accent)]" name="promptSource">
                                        <span class="text-sm text-[var(--text-secondary)]">Use default prompt</span>
                                    </label>
                                    <label class="flex items-center space-x-2 cursor-pointer" v-if="tagsWithCustomPrompts.length > 0">
                                        <input type="radio" v-model="summaryReprocessPromptSource" value="tag" class="text-[var(--text-accent)]" name="promptSource">
                                        <span class="text-sm text-[var(--text-secondary)]">Use prompt from tag</span>
                                    </label>
                                    <label class="flex items-center space-x-2 cursor-pointer">
                                        <input type="radio" v-model="summaryReprocessPromptSource" value="custom" class="text-[var(--text-accent)]" name="promptSource">
                                        <span class="text-sm text-[var(--text-secondary)]">Enter custom prompt</span>
                                    </label>
                                </div>
                            </div>

                            <!-- Tag Selection (shown when 'tag' is selected) -->
                            <div v-if="summaryReprocessPromptSource === 'tag' && tagsWithCustomPrompts.length > 0">
                                <label for="reprocess-tag-select" class="block text-sm font-medium text-[var(--text-muted)] mb-2">Select Tag</label>
                                <select id="reprocess-tag-select" v-model="summaryReprocessSelectedTagId" class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] text-sm bg-[var(--bg-input)] text-[var(--text-primary)]">
                                    <option value="">Select a tag...</option>
                                    <option v-for="tag in tagsWithCustomPrompts" :key="tag.id" :value="tag.id">${ tag.name }</option>
                                </select>
                                <div v-if="summaryReprocessSelectedTagId" class="mt-2 p-2 bg-[var(--bg-tertiary)] rounded text-xs text-[var(--text-muted)] max-h-20 overflow-y-auto">
                                    <strong>Preview:</strong> ${ getTagPromptPreview(summaryReprocessSelectedTagId) }
                                </div>
                            </div>

                            <!-- Custom Prompt Textarea (shown when 'custom' is selected) -->
                            <div v-if="summaryReprocessPromptSource === 'custom'">
                                <label for="reprocess-custom-prompt" class="block text-sm font-medium text-[var(--text-muted)] mb-2">Custom Prompt</label>
                                <textarea id="reprocess-custom-prompt" v-model="summaryReprocessCustomPrompt" rows="4" class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] text-sm bg-[var(--bg-input)] text-[var(--text-primary)]" placeholder="Enter your custom summarization instructions..."></textarea>
                            </div>

                            <!-- Info message when no tags with custom prompts exist -->
                            <div v-if="summaryReprocessPromptSource === 'tag' && tagsWithCustomPrompts.length === 0" class="text-xs text-[var(--text-muted)] italic">
                                No tags with custom prompts available. Create tags with custom prompts in the Account Settings.
                            </div>
                        </div>

                        <div class="flex items-start space-x-3">
                            <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-clock text-blue-600 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-[var(--text-secondary)] font-medium mb-1" v-text="t('help.processingTime')"></p>
                                <p class="text-sm text-[var(--text-muted)]">
                                    <span v-text="t('help.processingTimeDescription')"></span>
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex items-start space-x-3" v-if="reprocessType === 'transcription'">
                            <div class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-info-circle text-red-600 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-[var(--text-secondary)] font-medium mb-1" v-text="t('help.importantNote')"></p>
                                <p class="text-sm text-[var(--text-muted)]">
                                    <span v-text="t('reprocessModal.manualEditsOverwritten')"></span>
                                </p>
                            </div>
                        </div>
                        
                        <div class="flex items-start space-x-3" v-else-if="reprocessType === 'summary'">
                            <div class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                                <i class="fas fa-info-circle text-red-600 text-xs"></i>
                            </div>
                            <div>
                                <p class="text-[var(--text-secondary)] font-medium mb-1" v-text="t('help.importantNote')"></p>
                                <p class="text-sm text-[var(--text-muted)]">
                                    <span v-text="t('reprocessModal.manualEditsOverwrittenSummary')"></span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Footer with action buttons -->
                <div class="bg-[var(--bg-tertiary)] px-6 py-4 rounded-b-xl flex justify-end space-x-3 border-t border-[var(--border-primary)]">
                    <button 
                        @click="cancelReprocess" 
                        class="px-5 py-2.5 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)] transition-all duration-200 flex items-center shadow-sm font-medium">
                        <i class="fas fa-times mr-2"></i>
                        Cancel
                    </button>
                    <button 
                        @click="executeReprocess" 
                        class="px-5 py-2.5 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-200 flex items-center shadow-lg font-medium transform hover:scale-105">
                        <i class="fas fa-sync-alt mr-2"></i>
                        Start Reprocessing
                    </button>
                </div>
            </div>
        </div>
        <!-- Reset Status Confirmation Modal -->
        <div v-if="showResetModal" @click="cancelReset" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div @click.stop class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-md">
                <div class="p-6 text-center">
                    <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-orange-100 dark:bg-orange-800 mb-4">
                        <i class="fas fa-exclamation-triangle text-2xl text-orange-500 dark:text-orange-300"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-[var(--text-primary)] mb-2" v-text="t('modal.resetStatus')"></h3>
                    <p class="text-sm text-[var(--text-muted)] mb-6">
                        This will mark the recording as 'Failed'. This is useful if processing is stuck. You will be able to reprocess it afterwards.
                    </p>
                </div>
                <div class="bg-[var(--bg-tertiary)] px-6 py-4 rounded-b-xl flex justify-end space-x-3">
                    <button @click="cancelReset" class="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)]">
                        Cancel
                    </button>
                    <button @click="executeReset" class="px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600">
                        Yes, Reset Status
                    </button>
                </div>
            </div>
        </div>
        <!-- Simple Transcription Editor Modal -->
        <div v-if="showTextEditorModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] flex flex-col">
                <div class="p-6 border-b border-[var(--border-primary)]">
                    <h3 class="text-lg font-semibold" v-text="t('modal.editTranscription')"></h3>
                </div>
                <div class="p-6 space-y-4 overflow-y-auto flex-1">
                    <div>
                        <label class="block text-sm font-medium mb-2" v-text="t('transcription.title')"></label>
                        <textarea v-model="editingTranscriptionContent"
                                  rows="15"
                                  class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--ring-focus)] font-mono text-sm">
                        </textarea>
                    </div>
                </div>
                <div class="p-6 border-t border-[var(--border-primary)] flex justify-end gap-3">
                    <button @click="closeTextEditorModal"
                            class="px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
                        Cancel
                    </button>
                    <button @click="saveTranscription"
                            class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors">
                        Save Changes
                    </button>
                </div>
            </div>
        </div>

        <!-- ASR Transcription Editor Modal -->
        <div v-if="showAsrEditorModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div @click.stop class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-6xl flex flex-col max-h-[90vh]">
                <div class="p-5 border-b border-[var(--border-primary)] flex-shrink-0 flex justify-between items-center">
                    <h3 class="text-xl font-bold text-[var(--text-primary)]" v-text="t('modal.editAsrTranscription')"></h3>
                    <button @click="closeAsrEditorModal" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="flex-grow overflow-y-auto custom-scrollbar p-6">
                    <table class="min-w-full asr-editor-table">
                        <thead>
                            <tr>
                                <th class="w-1/4" v-text="t('help.speakerCount')"></th>
                                <th class="w-24" v-text="t('help.startTime')"></th>
                                <th class="w-24" v-text="t('help.endTime')"></th>
                                <th v-text="t('help.sentence')"></th>
                                <th class="w-12"><span class="sr-only" v-text="t('help.actions')"></span></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(segment, index) in editingSegments" :key="segment.id || index">
                                <td>
                                    <div class="speaker-combobox" @mouseleave="closeSpeakerSuggestions(index)">
                                        <input type="text" v-model="segment.speaker" @input="filterSpeakers(index)" @focus="openSpeakerSuggestions(index)" class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)] speaker-combobox-input" />
                                        <div class="speaker-combobox-arrow">
                                            <i class="fas fa-chevron-down text-xs"></i>
                                        </div>
                                        <div v-if="segment.showSuggestions" class="speaker-combobox-suggestions">
                                            <div v-for="speaker in segment.filteredSpeakers" @mousedown="selectSpeaker(index, speaker)" class="speaker-suggestion-item">${speaker}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="custom-number-input">
                                        <input type="number" step="0.01" v-model.number="segment.start_time" class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)]" />
                                        <div class="number-spinners">
                                            <button @click="adjustTime(index, 'start_time', 0.1)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" /></svg></button>
                                            <button @click="adjustTime(index, 'start_time', -0.1)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg></button>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="custom-number-input">
                                        <input type="number" step="0.01" v-model.number="segment.end_time" class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)]" />
                                        <div class="number-spinners">
                                            <button @click="adjustTime(index, 'end_time', 0.1)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" /></svg></button>
                                            <button @click="adjustTime(index, 'end_time', -0.1)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg></button>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <textarea v-model="segment.sentence" rows="1" class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)] resize-y"></textarea>
                                </td>
                                <td class="text-center">
                                    <button @click="removeSegment(index)" class="text-red-500 hover:text-red-700">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="mt-4">
                        <button @click="addSegment" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 flex items-center">
                            <i class="fas fa-plus mr-2"></i> Add Segment
                        </button>
                    </div>
                </div>
                <div class="bg-[var(--bg-tertiary)] px-6 py-4 flex justify-end space-x-3 border-t border-[var(--border-primary)] flex-shrink-0 rounded-b-xl">
                    <button @click="closeAsrEditorModal" class="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)]" v-text="t('common.cancel')"></button>
                    <button @click="saveAsrTranscription" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" v-text="t('buttons.saveChanges')"></button>
                </div>
            </div>
        </div>

        <!-- Speaker Identification Modal -->
        <div v-if="showSpeakerModal" @click="closeSpeakerModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div @click.stop @click="closeSpeakerSuggestionsOnClick" class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-4xl flex flex-col h-[85vh]">
                <div class="p-5 border-b border-[var(--border-primary)] flex-shrink-0">
                    <h3 class="text-xl font-bold text-[var(--text-primary)]" v-text="t('modal.identifySpeakers')"></h3>
                    <!-- Warning for too many speakers -->
                    <div v-if="modalSpeakers.length > 8" class="mt-3 p-3 bg-[var(--bg-warn-light)] border border-amber-300 dark:border-amber-800 rounded-lg">
                        <div class="flex items-start">
                            <i class="fas fa-exclamation-triangle text-[var(--text-warn-strong)] mt-0.5 mr-2"></i>
                            <div class="text-sm">
                                <p class="font-medium text-[var(--text-warn-strong)]" v-text="t('help.moreSpeakersThanColors')"></p>
                                <p class="text-[var(--text-warn-strong)] mt-1" v-text="t('help.youHaveXSpeakers', { count: modalSpeakers.length })">
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex-grow flex overflow-hidden modal-content">
                    <div class="w-1/3 p-6 space-y-4 overflow-y-auto custom-scrollbar border-r border-[var(--border-primary)]">
                        <div v-for="(speaker, index) in modalSpeakers" :key="`${selectedRecording.id}-speaker-${index}-${speaker}`" class="space-y-3">
                            <!-- Speaker label with color indicator and "This is Me" checkbox on same line -->
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-2">
                                    <div :class="speakerMap[speaker].color" class="w-4 h-4 rounded-full border border-white/30 shadow-sm flex-shrink-0"></div>
                                    <span class="font-mono text-sm text-[var(--text-muted)]">${ speakerDisplayMap[speaker] || speaker }</span>
                                    <span v-if="index >= 8" class="text-xs text-[var(--text-warn-strong)] bg-[var(--bg-warn-light)] px-2 py-0.5 rounded-full" title="Color repeats from speaker ${ ((index % 8) + 1) }">
                                        Repeat
                                    </span>
                                </div>
                                <label class="flex items-center text-sm text-[var(--text-muted)] cursor-pointer hover:text-[var(--text-primary)] transition-colors">
                                    <input type="checkbox" 
                                           v-model="speakerMap[speaker].isMe" 
                                           @focus="highlightSpeakerInTranscript(speaker)" 
                                           @blur="clearSpeakerHighlight" 
                                           class="speaker-checkbox">
                                    <span class="ml-2 select-none" v-text="t('help.me')"></span>
                                </label>
                            </div>
                            
                            <!-- Autocomplete input field - disabled when "This is Me" is checked -->
                            <div class="relative">
                                <input 
                                    type="text" 
                                    v-model="speakerMap[speaker].name" 
                                    @input="searchSpeakers($event.target.value, speaker)"
                                    @focus="focusSpeaker(speaker)" 
                                    @blur="blurSpeaker()"
                                    :disabled="speakerMap[speaker].isMe"
                                    class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)] disabled:bg-[var(--bg-tertiary)] disabled:text-[var(--text-muted)] disabled:cursor-not-allowed" 
                                    :placeholder="speakerMap[speaker].isMe ? t('help.me') : t('help.enterNameFor') + ' ' + (speakerDisplayMap[speaker] || speaker)"
                                    autocomplete="off">
                                
                                <!-- Loading indicator -->
                                <div v-if="loadingSuggestions[speaker] && !speakerMap[speaker].isMe" class="absolute right-3 top-1/2 transform -translate-y-1/2">
                                    <i class="fas fa-spinner fa-spin text-[var(--text-muted)] text-sm"></i>
                                </div>
                                
                                <!-- Suggestions dropdown - Only show when this input is active -->
                                <div v-if="activeSpeakerInput === speaker && speakerSuggestions[speaker] && speakerSuggestions[speaker].length > 0 && !speakerMap[speaker].isMe" 
                                     @click.stop
                                     class="absolute z-10 w-full mt-1 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-md shadow-lg max-h-48 overflow-y-auto">
                                    <div class="py-1">
                                        <div v-for="suggestion in speakerSuggestions[speaker]" 
                                             :key="suggestion.id"
                                             @click="selectSpeakerSuggestion(speaker, suggestion)"
                                             class="px-3 py-2 cursor-pointer hover:bg-[var(--bg-tertiary)] flex items-center justify-between">
                                            <div class="flex-grow">
                                                <div class="text-sm font-medium text-[var(--text-primary)]">${ suggestion.name }</div>
                                                <div class="text-xs text-[var(--text-muted)]">
                                                    Used ${ suggestion.use_count } time${ suggestion.use_count !== 1 ? 's' : '' }
                                                    <span v-if="suggestion.last_used">
                                                        • Last: ${ new Date(suggestion.last_used).toLocaleDateString() }
                                                    </span>
                                                </div>
                                            </div>
                                            <i class="fas fa-user text-[var(--text-muted)] ml-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Add Speaker Button -->
                        <div class="pt-4 border-t border-[var(--border-primary)]">
                            <button @click="openAddSpeakerModal" class="w-full px-4 py-2 bg-[var(--bg-accent)] text-[var(--text-accent)] rounded-lg hover:bg-[var(--bg-accent-hover)] transition-colors flex items-center justify-center">
                                <i class="fas fa-plus mr-2"></i>
                                Add Speaker
                            </button>
                        </div>
                    </div>
                    <div class="w-2/3 p-6 flex flex-col overflow-hidden">
                        <!-- Audio Player Section -->
                        <div class="mb-4 flex-shrink-0">
                            <h4 class="font-semibold text-[var(--text-secondary)] mb-2" v-text="t('help.audioPlayer')"></h4>
                            <div class="audio-player-container">
                                <audio controls class="w-full speaker-modal-transcript" :key="selectedRecording.id" :src="'/audio/' + selectedRecording.id" :volume="playerVolume" @volumechange="onPlayerVolumeChange">
                                    Your browser does not support the audio element.
                                </audio>
                            </div>
                        </div>
                        
                        <!-- Transcript Section -->
                        <div class="flex-grow overflow-y-auto custom-scrollbar speaker-modal-transcript" @click="seekAudioFromEvent">
                            <div v-if="processedTranscription.isJson">
                                <div v-for="(segment, index) in processedTranscription.simpleSegments" :key="index" class="speaker-segment mb-2 group relative" :data-start-time="segment.startTime">
                                    <p class="flex items-start">
                                        <span :class="[segment.color, 'speaker-tag', { 'speaker-highlight': highlightedSpeaker === segment.speakerId }]" :data-speaker-id="segment.speakerId">[${ segment.speaker }]</span>:
                                        <span class="word cursor-pointer hover:bg-[var(--bg-accent)] hover:text-[var(--text-accent)] rounded px-0.5 flex-1">${ segment.sentence }</span>

                                        <!-- Edit buttons (shown on hover) -->
                                        <span class="ml-2 opacity-0 group-hover:opacity-100 transition-opacity flex items-center space-x-1 flex-shrink-0">
                                            <!-- Change Speaker Button -->
                                            <button @click.stop="openSpeakerChangeDropdown(index)" class="p-1 rounded bg-[var(--bg-tertiary)] hover:bg-[var(--bg-accent)] text-[var(--text-muted)] hover:text-[var(--text-accent)] transition-colors" title="Change speaker">
                                                <i class="fas fa-user-edit text-xs"></i>
                                            </button>
                                            <!-- Edit Text Button -->
                                            <button @click.stop="openEditTextModal(index)" class="p-1 rounded bg-[var(--bg-tertiary)] hover:bg-[var(--bg-accent)] text-[var(--text-muted)] hover:text-[var(--text-accent)] transition-colors" title="Edit text">
                                                <i class="fas fa-edit text-xs"></i>
                                            </button>
                                        </span>
                                    </p>

                                    <!-- Speaker Change Dropdown -->
                                    <div v-if="editingSpeakerIndex === index" @click.stop class="mt-2 p-2 bg-[var(--bg-tertiary)] rounded-lg border border-[var(--border-primary)] shadow-lg">
                                        <p class="text-xs text-[var(--text-muted)] mb-2">Select new speaker:</p>
                                        <div class="space-y-1 max-h-48 overflow-y-auto custom-scrollbar">
                                            <button v-for="speaker in modalSpeakers" :key="speaker" @click="changeSpeaker(index, speaker)" class="w-full text-left px-3 py-2 rounded hover:bg-[var(--bg-accent)] hover:text-[var(--text-accent)] transition-colors flex items-center space-x-2">
                                                <div :class="speakerMap[speaker].color" class="w-3 h-3 rounded-full flex-shrink-0"></div>
                                                <span class="text-sm">${ speakerMap[speaker].name || speaker }</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-else v-html="highlightedTranscript"></div>
                        </div>
                        
                        <!-- Speaker Navigation Controls (at bottom) - Always visible for consistent height -->
                        <div class="mt-3 p-3 bg-[var(--bg-tertiary)] rounded-lg flex items-center justify-between flex-shrink-0" :class="{'opacity-50': !highlightedSpeaker || speakerGroups.length <= 1}">
                            <div class="flex items-center space-x-2">
                                <span class="text-sm text-[var(--text-muted)]">
                                    Navigate <span class="font-semibold">${ speakerDisplayMap[highlightedSpeaker] || highlightedSpeaker }</span> groups:
                                </span>
                                <span class="text-xs text-[var(--text-muted)]">
                                    (${ currentSpeakerGroupIndex + 1 } of ${ speakerGroups.length })
                                </span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <button @mousedown.prevent @click="navigateToPrevSpeakerGroup" 
                                        class="px-3 py-1.5 bg-[var(--bg-secondary)] hover:bg-[var(--bg-primary)] text-[var(--text-secondary)] rounded-md border border-[var(--border-secondary)] transition-all flex items-center text-sm disabled:opacity-50 disabled:cursor-not-allowed"
                                        :disabled="!highlightedSpeaker || speakerGroups.length <= 1">
                                    <i class="fas fa-chevron-up mr-1.5"></i>
                                    Previous
                                </button>
                                <button @mousedown.prevent @click="navigateToNextSpeakerGroup" 
                                        class="px-3 py-1.5 bg-[var(--bg-secondary)] hover:bg-[var(--bg-primary)] text-[var(--text-secondary)] rounded-md border border-[var(--border-secondary)] transition-all flex items-center text-sm disabled:opacity-50 disabled:cursor-not-allowed"
                                        :disabled="!highlightedSpeaker || speakerGroups.length <= 1">
                                    Next
                                    <i class="fas fa-chevron-down ml-1.5"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="p-4 bg-[var(--bg-tertiary)] border-t border-[var(--border-primary)] flex-shrink-0">
                    <label class="flex items-center text-sm text-[var(--text-muted)] cursor-pointer hover:text-[var(--text-primary)] transition-colors">
                        <input type="checkbox" 
                               v-model="regenerateSummaryAfterSpeakerUpdate" 
                               class="speaker-checkbox">
                        <span class="ml-2 select-none" v-text="t('help.regenerateSummaryAfterNames')"></span>
                    </label>
                </div>
                <div class="bg-[var(--bg-tertiary)] px-6 py-4 flex justify-between items-center border-t border-[var(--border-primary)] flex-shrink-0 rounded-b-xl">
                    <div>
                        <button @click="autoIdentifySpeakers" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 flex items-center" :disabled="isAutoIdentifying">
                            <i class="fas fa-magic mr-2"></i>
                            <span v-if="!isAutoIdentifying" v-text="t('help.autoIdentify')"></span>
                            <span v-else>
                                <i class="fas fa-spinner fa-spin mr-2"></i>
                                Identifying...
                            </span>
                        </button>
                    </div>
                    <div class="flex space-x-3">
                        <button @click="closeSpeakerModal" class="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)]" v-text="t('common.cancel')"></button>
                        <button 
                            @click="saveSpeakerNames" 
                            :disabled="!hasSpeakerNames"
                            :class="hasSpeakerNames 
                                ? 'px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 cursor-pointer' 
                                : 'px-4 py-2 bg-gray-400 text-gray-200 rounded-lg cursor-not-allowed'"
                        >
                            Save Names
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add Speaker Modal -->
        <div v-if="showAddSpeakerModal" @click="closeAddSpeakerModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div @click.stop class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-md p-6">
                <h3 class="text-xl font-bold text-[var(--text-primary)] mb-4">Add New Speaker</h3>

                <!-- "This is Me" checkbox -->
                <div class="mb-4">
                    <label class="flex items-center text-sm text-[var(--text-muted)] cursor-pointer hover:text-[var(--text-primary)] transition-colors">
                        <input type="checkbox" v-model="newSpeakerIsMe" class="speaker-checkbox">
                        <span class="ml-2 select-none">This is Me</span>
                    </label>
                </div>

                <!-- Speaker name input (disabled if "This is Me" is checked) -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                        Speaker Name
                    </label>
                    <input
                        type="text"
                        v-model="newSpeakerName"
                        :disabled="newSpeakerIsMe"
                        :placeholder="newSpeakerIsMe ? 'Me' : 'Enter speaker name...'"
                        class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)] disabled:bg-[var(--bg-tertiary)] disabled:text-[var(--text-muted)] disabled:cursor-not-allowed"
                        @keyup.enter="addNewSpeaker"
                    >
                </div>

                <!-- Action buttons -->
                <div class="flex justify-end space-x-3">
                    <button @click="closeAddSpeakerModal" class="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)] transition-colors">
                        Cancel
                    </button>
                    <button @click="addNewSpeaker" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                        Add Speaker
                    </button>
                </div>
            </div>
        </div>

        <!-- Edit Text Modal -->
        <div v-if="showEditTextModal" @click="closeEditTextModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div @click.stop class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-2xl p-6">
                <h3 class="text-xl font-bold text-[var(--text-primary)] mb-4">Edit Transcript Text</h3>

                <!-- Text editor -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-[var(--text-secondary)] mb-2">
                        Text Content
                    </label>
                    <textarea
                        v-model="editedText"
                        rows="6"
                        class="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md shadow-sm focus:outline-none focus:ring-[var(--border-focus)] focus:border-[var(--border-focus)] sm:text-sm bg-[var(--bg-input)] text-[var(--text-primary)] resize-y"
                        placeholder="Enter transcript text..."
                    ></textarea>
                </div>

                <!-- Action buttons -->
                <div class="flex justify-end space-x-3">
                    <button @click="closeEditTextModal" class="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg border border-[var(--border-secondary)] hover:bg-[var(--bg-tertiary)] transition-colors">
                        Cancel
                    </button>
                    <button @click="saveEditedText" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                        Save Changes
                    </button>
                </div>
            </div>
        </div>

        <!-- Global Error Display -->
        <div v-if="globalError" 
             class="fixed top-4 right-4 bg-[var(--bg-danger)] text-white p-4 rounded-lg shadow-lg z-50 max-w-md">
            <div class="flex items-start gap-3">
                <i class="fas fa-exclamation-circle text-lg flex-shrink-0 mt-0.5"></i>
                <div class="flex-1">
                    <p class="font-medium" v-text="t('common.error')"></p>
                    <p class="text-sm opacity-90">${globalError}</p>
                </div>
                <button @click="globalError = null" 
                        class="text-white hover:text-gray-200 transition-colors">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>

        <!-- System Audio Help Modal -->
        <div v-if="showSystemAudioHelp" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 backdrop-blur-sm">
            <div class="bg-[var(--bg-secondary)] w-full h-full md:h-auto md:max-h-[90vh] md:w-full md:max-w-2xl md:rounded-lg md:shadow-xl flex flex-col">
                <div class="p-4 border-b border-[var(--border-primary)] flex-shrink-0">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold flex items-center">
                            <i class="fas fa-desktop mr-2 text-blue-500"></i>
                            System Audio Recording
                        </h3>
                        <button @click="showSystemAudioHelp = false" class="text-[var(--text-muted)] hover:text-[var(--text-primary)]">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="p-6 space-y-6 overflow-y-auto flex-grow">
                    <div class="bg-[var(--bg-tertiary)] p-4 rounded-lg border border-[var(--border-primary)]">
                        <h4 class="font-medium text-[var(--text-primary)] mb-2" v-text="t('help.howToRecordSystemAudio')"></h4>
                        <p class="text-sm text-[var(--text-muted)]" v-text="t('help.toCaptureAudioFromMeetings')">
                        </p>
                        <ol class="list-decimal list-inside space-y-2 text-sm text-[var(--text-secondary)] mt-3">
                            <li v-text="t('help.recordSystemSteps1')"></li>
                            <li><span v-text="t('help.recordSystemSteps2')"></span> <strong>"${ t('help.entireScreen') }"</strong> or a <strong v-text="t('help.specificBrowserTab')"></strong>.</li>
                            <li><span v-text="t('help.recordSystemSteps3')"></span> <strong>"${ t('help.shareTabAudio') }"</strong> or <strong>"${ t('help.shareSystemAudio') }"</strong>.</li>
                        </ol>
                        <p class="text-xs text-amber-600 dark:text-amber-400 mt-3"><i class="fas fa-exclamation-triangle mr-1"></i><span v-text="t('help.sharingWindowNoAudio')"></span></p>
                    </div>

                    <div class="space-y-4">
                        <h4 class="font-medium text-[var(--text-primary)]" v-text="t('help.troubleshooting')"></h4>
                        
                        <div class="bg-[var(--bg-tertiary)] p-4 rounded-lg border border-[var(--border-primary)]">
                            <h5 class="font-medium text-[var(--text-primary)] mb-2" v-text="t('help.whyNotWorking')"></h5>
                            <p class="text-sm text-[var(--text-muted)]">
                                System audio recording requires a secure (HTTPS) connection. If you are developing locally, you may need to enable a browser flag.
                            </p>
                        </div>

                        <!-- Chrome Solution -->
                        <div v-if="browser === 'chrome'" class="bg-[var(--bg-accent)] p-4 rounded-lg border border-[var(--border-accent)]">
                            <h5 class="font-medium text-[var(--text-accent)] mb-3 flex items-center">
                                <i class="fab fa-chrome mr-2"></i>
                                For Chrome on Localhost
                            </h5>
                            <ol class="list-decimal list-inside space-y-2 text-sm text-[var(--text-secondary)]">
                                <li>Go to: <code class="bg-[var(--bg-secondary)] px-2 py-1 rounded text-xs ml-1">chrome://flags/#unsafely-treat-insecure-origin-as-secure</code></li>
                                <li>Add your local URL (e.g., <code class="bg-[var(--bg-secondary)] px-2 py-1 rounded text-xs ml-1">http://localhost:8899</code>)</li>
                                <li>Set to <strong>"Enabled"</strong> and relaunch Chrome.</li>
                            </ol>
                        </div>

                        <!-- Firefox Solution -->
                        <div v-else-if="browser === 'firefox'" class="bg-[var(--bg-accent)] p-4 rounded-lg border border-[var(--border-accent)]">
                            <h5 class="font-medium text-[var(--text-accent)] mb-3 flex items-center">
                                <i class="fab fa-firefox-browser mr-2"></i>
                                For Firefox on Localhost
                            </h5>
                            <p class="text-sm text-[var(--text-secondary)]">
                                System audio recording is not well-supported on Firefox, even with these changes. For best results, please use Chrome.
                            </p>
                            <ol class="list-decimal list-inside space-y-2 text-sm text-[var(--text-secondary)] mt-2">
                                <li>Go to: <code class="bg-[var(--bg-secondary)] px-2 py-1 rounded text-xs ml-1">about:config</code></li>
                                <li>Search for <code class="bg-[var(--bg-secondary)] px-2 py-1 rounded text-xs ml-1">media.devices.insecure.enabled</code> and set it to `true`.</li>
                                <li>Restart Firefox.</li>
                            </ol>
                        </div>

                        <!-- Other Browsers -->
                        <div v-else class="bg-[var(--bg-tertiary)] p-4 rounded-lg border border-[var(--border-primary)]">
                            <h5 class="font-medium text-[var(--text-primary)] mb-2" v-text="t('help.unsupportedBrowser')"></h5>
                            <p class="text-sm text-[var(--text-muted)]">
                                For the best experience with system audio recording, we recommend using Google Chrome.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="p-4 border-t border-[var(--border-primary)] flex justify-end flex-shrink-0">
                    <button @click="showSystemAudioHelp = false" 
                            class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors">
                        Got it
                    </button>
                </div>
            </div>
        </div>

        <!-- Recording Disclaimer Modal -->
        <div v-if="showRecordingDisclaimerModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col overflow-hidden">
                <div class="flex-shrink-0 p-6 border-b border-[var(--border-primary)]">
                    <div class="flex items-center gap-3">
                        <i class="fas fa-info-circle text-2xl text-[var(--text-accent)]"></i>
                        <h3 class="text-xl font-semibold text-[var(--text-primary)]" v-text="t('modal.recordingNotice')"></h3>
                    </div>
                </div>
                <div class="flex-1 overflow-y-auto p-6">
                    <!-- Render markdown content -->
                    <div class="prose prose-sm max-w-none text-[var(--text-secondary)]" 
                         style="color: var(--text-secondary); line-height: 1.6;">
                        <div v-html="recordingDisclaimer"></div>
                    </div>
                </div>
                <div class="flex-shrink-0 p-6 border-t border-[var(--border-primary)] bg-[var(--bg-tertiary)] rounded-b-lg">
                    <div class="flex justify-end gap-3">
                        <button @click="cancelRecordingDisclaimer" 
                                class="px-6 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-secondary)] rounded-lg transition-colors border border-[var(--border-secondary)]">
                            Cancel
                        </button>
                        <button @click="acceptRecordingDisclaimer" 
                                class="px-6 py-2 bg-[var(--bg-accent)] text-white rounded-lg hover:bg-[var(--bg-accent-hover)] transition-colors">
                            <i class="fas fa-microphone mr-2"></i>
                            Start Recording
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Toast Container -->
        <div id="toastContainer" class="fixed bottom-4 right-4 z-50 space-y-2"></div>

        <!-- Share Modal -->
        <div v-if="showShareModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-lg">
                <div class="p-6 border-b border-[var(--border-primary)]">
                    <h3 class="text-lg font-semibold" v-text="t('modal.shareRecording')"></h3>
                </div>
                <div class="p-6 space-y-4">
                    <p class="text-sm text-[var(--text-muted)]" v-text="t('help.createPublicLink')"></p>
                    <div v-if="!generatedShareLink">
                        <div class="flex items-center mb-2">
                            <input type="checkbox" v-model="shareOptions.share_summary" id="share_summary" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <label for="share_summary" class="ml-2 block text-sm text-[var(--text-secondary)]" v-text="t('form.shareSummary')"></label>
                        </div>
                        <div class="flex items-center">
                            <input type="checkbox" v-model="shareOptions.share_notes" id="share_notes" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <label for="share_notes" class="ml-2 block text-sm text-[var(--text-secondary)]" v-text="t('form.shareNotes')"></label>
                        </div>
                    </div>
                    <div v-if="generatedShareLink" class="mt-4">
                        <div v-if="existingShareDetected" class="mb-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                            <div class="flex items-start gap-2">
                                <i class="fas fa-info-circle text-blue-600 dark:text-blue-400 mt-0.5"></i>
                                <div class="text-sm text-blue-800 dark:text-blue-300">
                                    <p class="font-medium">Using existing share link</p>
                                    <p class="mt-1 text-xs opacity-90">This recording was already shared. The same link has been retrieved.</p>
                                </div>
                            </div>
                        </div>
                        <label class="block text-sm font-medium mb-2" v-text="t('form.shareableLink')"></label>
                        <div class="flex items-center gap-2">
                            <input :value="generatedShareLink" readonly class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg">
                            <button @click="copyShareLink" class="px-3 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)]">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        <div v-if="existingShareDetected" class="mt-3">
                            <button @click="createShare(true)" class="text-sm text-[var(--text-accent)] hover:underline">
                                <i class="fas fa-plus-circle mr-1"></i>Create a new share link instead
                            </button>
                        </div>
                    </div>
                </div>
                <div class="p-6 border-t border-[var(--border-primary)] flex justify-end gap-3">
                    <button @click="closeShareModal" class="px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
                        Cancel
                    </button>
                    <button @click="createShare()" v-if="!generatedShareLink" class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors">
                        Create Link
                    </button>
                </div>
            </div>
        </div>

        <!-- Shares List Modal -->
        <div v-if="showSharesListModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
                <div class="p-6 border-b border-[var(--border-primary)] flex justify-between items-center">
                    <h3 class="text-lg font-semibold" v-text="t('modal.sharedTranscripts')"></h3>
                    <button @click="closeSharesList" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="p-6 space-y-4 overflow-y-auto">
                    <div v-if="isLoadingShares" class="text-center">
                        <i class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
                    </div>
                    <div v-else-if="userShares.length === 0" class="text-center text-[var(--text-muted)]">
                        <span v-text="t('sharedTranscripts.noSharedTranscripts')"></span>
                    </div>
                    <div v-else class="space-y-3">
                        <div v-for="share in userShares" :key="share.id" class="bg-[var(--bg-tertiary)] p-4 rounded-lg border border-[var(--border-primary)]">
                            <div class="flex justify-between items-start">
                                <div>
                                    <p class="font-semibold">${share.recording_title}</p>
                                    <p class="text-sm text-[var(--text-muted)]">${ t('help.sharedOn') }: ${share.created_at}</p>
                                </div>
                                <button @click="confirmDeleteShare(share)" class="text-red-500 hover:text-red-700 p-1"><i class="fas fa-trash"></i></button>
                            </div>
                            <div class="mt-4 flex items-center gap-4">
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" v-model="share.share_summary" @change="updateShare(share)" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="ml-2" v-text="t('form.shareSummary')"></span>
                                </label>
                                <label class="flex items-center text-sm">
                                    <input type="checkbox" v-model="share.share_notes" @change="updateShare(share)" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                    <span class="ml-2" v-text="t('form.shareNotes')"></span>
                                </label>
                            </div>
                            <div class="mt-4">
                                <input :value="'{{ request.url_root }}share/' + share.public_id" readonly class="w-full px-3 py-2 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg text-sm">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Share Delete Confirmation Modal -->
        <div v-if="showShareDeleteModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
            <div class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-300 ease-in-out">
                <!-- Header with gradient background -->
                <div class="bg-gradient-to-r from-red-500 to-red-600 p-5 rounded-t-xl">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-white/20 backdrop-blur rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-trash-alt text-white text-lg"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-white">Delete Shared Link</h3>
                            <p class="text-red-100 text-sm mt-1">This action cannot be undone</p>
                        </div>
                    </div>
                </div>
                
                <!-- Content -->
                <div class="p-6">
                    <p class="text-[var(--text-secondary)] mb-4">
                        Are you sure you want to delete the shared link for:
                    </p>
                    <div v-if="shareToDelete" class="bg-[var(--bg-tertiary)] p-3 rounded-lg border border-[var(--border-primary)]">
                        <p class="font-medium text-[var(--text-primary)]">${shareToDelete.recording_title}</p>
                        <p class="text-sm text-[var(--text-muted)] mt-1">Shared on: ${shareToDelete.created_at}</p>
                    </div>
                    <div class="mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
                        <div class="flex items-start">
                            <i class="fas fa-exclamation-triangle text-red-600 dark:text-red-400 mt-0.5 mr-2"></i>
                            <p class="text-sm text-red-800 dark:text-red-300">
                                The share link will be permanently deleted and anyone with this link will no longer be able to access the recording.
                            </p>
                        </div>
                    </div>
                </div>
                
                <!-- Actions -->
                <div class="p-6 pt-0 flex justify-end gap-3">
                    <button @click="cancelDeleteShare" class="px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
                        Cancel
                    </button>
                    <button @click="deleteShare" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center gap-2">
                        <i class="fas fa-trash"></i>
                        Delete Share Link
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- CSRF Token Management -->
    <script src="{{ url_for('static', filename='js/csrf-refresh.js') }}"></script>
    
    <!-- i18n System -->
    <script src="{{ url_for('static', filename='js/i18n.js') }}"></script>
    
    <!-- Initialize i18n immediately with fallback -->
    <script>
        // Ensure i18n is initialized before Vue app
        (async function() {
            if (window.i18n && window.i18n.init) {
                const userLang = localStorage.getItem('preferredLanguage') || '{{ user_language }}' || 'en';
                try {
                    await window.i18n.init(userLang);
                    console.log('i18n pre-initialized with language:', userLang);
                } catch (error) {
                    console.error('Failed to initialize i18n:', error);
                }
            }
            
            // Hide loader after i18n is ready
            const loader = document.getElementById('loader');
            if (loader) {
                loader.style.display = 'none';
            }
        })();
    </script>

    <!-- Service Worker Registration for PWA and Background Recording -->
    <script>
        // Register service worker for PWA functionality and background recording support
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/static/service-worker.js')
                    .then((registration) => {
                        console.log('Service Worker registered successfully:', registration.scope);

                        // Check for updates periodically
                        setInterval(() => {
                            registration.update();
                        }, 60000); // Check every minute
                    })
                    .catch((error) => {
                        console.error('Service Worker registration failed:', error);
                    });
            });
        }
    </script>

    <!-- Vue.js Application Script -->
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>
